/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "antd/es/style/themes/default.less";
@import 'antd/dist/antd.less';
@import "@/components/navBar/navBar.less";

.ant-layout-header {
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  background: #FFF;
}

.ant-tabs-nav-wrap {
  padding: 0px 5px;
}

.ant-tooltip {
  .ant-tooltip-inner {
    background-color: rgba(0, 0, 0, 0.85);
  }
}

.ant-statistic-title {
  font-size: 12px;
}

// This is for the suffix part of the value ex: TB, GB etc
.ant-statistic-content-suffix {
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  text-align: left;
  vertical-align: text-top;
  color: rgba(0, 0, 0, 0.85);
  margin: 3px 0 0 1px;
}

.ant-divider-horizontal {
  margin: 16px 0;
}

.ant-card-body {
  // This is to enforce 16px padding for card body which is 12px by default
  padding: 16px !important;
}

.content-layout {
  margin-left: 200px;
  &.sidebar-collapsed {
    margin-left: @sidebar-collapsed-width;
  }
}

.page-header {
  padding: 10px 0;
  font-size: 20px;
  font-weight: 500;
}

.page-header-v2 {
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  background-color: #FFFFFF;
}

.content-div {
  padding: 24px;
  background-color: #FFF;
  min-height: 80vh;
}

body {
  font-family: 'Roboto', sans-serif;
}

.icon-warning {
  color: #e49f00;
}

.icon-success {
  color: #1da57a;
}

.icon-failure {
  color: #f83437;
}

.icon-neutral {
  color: gray;
}

.hexagon-shape(@width, @height, @bg-color) {
  @half-width: @width/2;
  @half-height: @height/2;
  width: ~"@{width}px";
  height: ~"@{height}px";
  background: @bg-color;
  position: relative;
  display: inline-block;
  &:before {
    content: "";
    position: absolute;
    top: ~"-@{half-height}px";
    left: 0;
    width: 0;
    height: 0;
    border-left: ~"@{half-width}px" solid transparent;
    border-right: ~"@{half-width}px" solid transparent;
    border-bottom: ~"@{half-height}px" solid @bg-color;
  }
  &:after {
    content: "";
    position: absolute;
    bottom: ~"-@{half-height}px";
    left: 0;
    width: 0;
    height: 0;
    border-left: ~"@{half-width}px" solid transparent;
    border-right: ~"@{half-width}px" solid transparent;
    border-top: ~"@{half-height}px" solid @bg-color;
  }
}

.ratis-icon {
  .hexagon-shape(20, 12, @cyan-7);
}

.standalone-icon {
  .hexagon-shape(20, 12, @orange-7);
}

.icon-text(@content, @fontcolor) {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  top: -3px;
  color: @fontcolor;
  &:after {
    content: @content;
    position: absolute;
    left: 5px;
    top: 4px;
    width: 10px;
    height: 0;
    color: @fontcolor;
    font-size: 12px;
    z-index: 2;
  }
}

.icon-text-three-dots {
  // In Unicode, \2026 is the horizontal ellipsis (...)
  .icon-text("\2026", #fff);
}

.icon-text-three-dots-leader {
  // In Unicode, \2026 is the horizontal ellipsis (...)
  .icon-text("\2026", #ffde36);
}

.icon-text-one-dot {
  .icon-text(".", #ffde36);
}

.replication-icon {
  display: inline-block;
  margin-right: 5px;
}

.pointer {
  cursor: pointer;
}

.data-container {
  padding: 24px;
  height: 80vh;
}

.health-availability {
  display: inline-flex;
  flex-direction: column;
  
  .health-availability-value {
    font-size: 18px;
    font-weight: 400;
  }
}

#error-icon {
  font-size: 24px;
  width: 100%;
  color: #5A656D;
}

.cluster-card-data-container {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  &.vertical-layout {
    flex-direction: column;
    gap: 0px;
  }

  .cluster-card-statistic {
    flex: 2 1 10em;
  }

  .data-detail-item {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    border-radius: 3px;

    .data-detail-breakdown-container {
      justify-content: flex-end;
      flex-wrap: wrap;
      .data-detail-breakdown-item {
        margin-left: 20px;
        .data-detail-breakdown-label {
          font-size: 12px;
          color: #5a656d;
          margin-right: 4px;
        }

        .data-detail-breakdown-value {
          font-size: 14px;
          font-weight: 500;
        }
        
      }
    }
  }

  .data-detail-breakdown-container {
    .ant-statistic-title {
      margin-bottom: 0;
    }

    .ant-statistic-content {
      .ant-statistic-content-prefix {
        margin-right: 1px;
      }
      .ant-statistic-content-value {
        font-size: 16px;
      }
    }
  }
}

.stacked-progress {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 100px;
  overflow: hidden;
  margin: 24px auto 8px auto;
}

.stacked-progress-empty {
  width: 100%;
  height: 8px;
  border-radius: 100px;
  background-color: #f4f5f6;
  margin: 24px auto 8px auto;
}