/*
 * 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;
}

.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;
}

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

.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;
}

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