/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
@import '@/styles/common.less';

.dark_box {

  .@{container-prefix}-select-selector,
  .@{container-prefix}-picker {
    background: #2a2d34ff;
    color: #fff;
    border: 1px solid rgb(68, 68, 68);
  }

  .@{container-prefix}-select-arrow,
  .@{container-prefix}-picker-suffix,
  .@{container-prefix}-picker-clear {
    color: #f7f7f7;
  }

  .@{container-prefix}-input-affix-wrapper {
    background: #2a2d34ff;
  }

  .modal_flex_delete {
    .@{container-prefix}-modal-header {
      .@{container-prefix}-modal-title {
        color: #f7f7f7;
      }
    }

    .@{container-prefix}-modal-close-x {
      svg {
        color: #f7f7f7 !important;
      }
    }

    .word_tograry {
      .word_tograry_alarm {
        .bread_word_delete {
          color: #f7f7f7 !important;
        }
      }
    }
  }

  .@{container-prefix}-table-cell a {
    color: #6090ff;
  }

  .@{container-prefix}-breadcrumb {
    background-color: #2a2d34ff;
    color: #F7F7F7;
    box-shadow: @dark-box-shadow;

    li {
      span {
        color: #F7F7F7;
      }
    }
  }

  table,
  .summary_cell {
    color: #fff;
    background: #2a2d34ff !important;
  }

  .tab_container {
    background: @dark-background-color;

    .@{container-prefix}-input-outlined {
      background-color: @dark-background-color;
      color: #666666;
      border-color: #666666;
    }

    .@{container-prefix}-input-outlined::placeholder {
      color: #666666;
    }

    .@{container-prefix}-input-search-button {
      color: #666666 !important;
      background-color: @dark-background-color;
      border-color: #666666;
    }

    .tab_table_flex {
      background: @dark-background-color;

      table {
        color: #fff;
        background: @dark-background-color !important;

        .@{container-prefix}-table-thead {
          tr {
            th {
              color: #fff;
              // background: @dark-background-color;
            }

            th::before {
              background-color: @dark-background-color;
            }

            .@{container-prefix}-table-filter-trigger {
              color: #fff;
            }

            .@{container-prefix}-table-filter-trigger.active {
              color: #1668dc
            }

            .@{container-prefix}-table-column-sorter {
              color: #fff;
            }
          }

        }
      }
    }
  }

  .@{container-prefix}-pagination-prev {
    background: @dark-background-color;
    border: 1px solid #666666;
  }

  .@{container-prefix}-pagination-prev:hover {
    button {
      background: @button-hover-color !important;
      color: #fff;
    }
  }

  .@{container-prefix}-pagination-disabled:hover {
    button {
      background: @dark-background-color !important;
    }
  }

  .@{container-prefix}-pagination-item {
    background: @dark-background-color;
    border: 1px solid #666666;

    a:hover {
      color: #fff !important;
    }
  }

  .@{container-prefix}-pagination-item:hover {
    background: @button-hover-color !important;
    color: #fff;

    button {
      background: @button-hover-color !important;
      color: #fff;
    }
  }

  .@{container-prefix}-pagination-next {
    background-color: @dark-background-color;
    border: 1px solid #666666;
  }

  .@{container-prefix}-pagination-next:hover {
    background: @button-hover-color !important;
    color: #fff;

    button {
      background: @button-hover-color !important;
    }
  }

  .aim_word_chart {
    background: #2a2d34ff !important;
  }

  .empty_handle {
    button {
      color: #fff;
      background: #2a2d34ff;
      border: 1px solid #444444;
    }
  }

  .container_content,
  .child_content {
    background: #171a1f !important;
  }

  .container_padding_margin_box {
    background: #2a2d34ff;

  }

  .@{container-prefix}-input-outlined {
    background-color: #2a2d34 !important;
    color: #666 !important;
    border-color: #666 !important;
  }


  .summary_cell {
    button {
      background: #2a2d34ff !important;
    }
  }

  .stricy_bottom {
    background-color: #2a2d34;
  }

  .cancel_btn {
    color: #f7f7f7;
    background: #2a2d34ff;
    border: 1px solid #444444ff;
  }

  .clusterLogContent {
    background-color: #242e42;
    border: 1px solid #242e42;
    color: #fff;
  }

  .@{container-prefix}-pagination-options-quick-jumper input {
    color: #fff !important;
    background-color: @dark-background-color !important;
    border: 1px solid #666666;
  }

  .page .@{container-prefix}-select:hover .@{container-prefix}-select-selector {
    background-color: @dark-background-color !important;
  }

  .@{container-prefix}-table-tbody {
    .container-platform-table-row {
      background: @dark-background-color !important;
    }

    tr {
      td {
        background: @dark-background-color !important;
      }

    }
  }

  .left_cluster {
    h3 {
      color: #fff;
    }
  }

  .@{container-prefix}-tabs-nav {
    background-color: #2a2d34ff;
    box-shadow: @dark-box-shadow;
  }

  .@{container-prefix}-tabs-nav:before {
    border-color: #666666;
  }

  .@{container-prefix}-tabs-tab {
    color: #fff;
  }

  .detail_card {
    background: #2a2d34ff;

    h3 {
      color: #fff;
    }
  }

  .detail_info_box {
    .base_description {
      .base_value {
        color: #fff !important;
      }
    }
  }

  .upgrade_tooltip {
    div {
      p {
        color: #333333;
      }
    }
  }

  .disable_btn {
    color: #f7f7f7 !important;
    background: #616877 !important;
    border: 1px solid #616877 !important;
  }
}