@import './varible.scss';

* {
  outline: none;
  box-sizing: border-box;
  font-family: 'HarmonyOS Sans SC Medium', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Microsoft JhengHei', 'Huawei sans', Arial;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-width: $APP-MIN-WIDTH;
  background-color: var(--o-bg-color-dark);
  font-size: $FONT-12;
  overflow: auto;
  color: var(--o-text-color-primary);
}
ul,
li,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
p,
form {
  margin: 0;
  padding: 0;
}

.pad-16 {
  padding: 16px;
}

.pad-24 {
  padding: 24px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: $FONT-COLOR-PLACEHOLDER !important;
  font-size: $FONT-12 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: $FONT-COLOR-PLACEHOLDER !important;
  font-size: $FONT-12 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: $FONT-COLOR-PLACEHOLDER !important;
  font-size: $FONT-12 !important;
}

#app {
  height: 100%;
}

.h-100 {
  height: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 20px;
  color: var(--o-text-color-primary);
  letter-spacing: 0;
  line-height: 30px;
}

.background {
  background: var(--o-bg-color-base);
  border-radius: 4px;
}

.font-14 {
  font-size: 14px;
}

.font-16 {
  font-size: 16px;
}

.right {
  float: right;
}

// 取消edge浏览器密码输入框出现的删除图标与眼睛图标
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

// Primary保存按钮样式覆盖
.el-button {
  min-width: 80px;
  box-sizing: border-box;
  // 支持单独定制按钮大圆角覆盖样式
  border-radius: var(--i-button-border-radius);
}
// 大圆角定制
.el-tag {
  border-radius: var(--i-button-border-radius) !important;
}

.el-radio-button {
  .el-radio-button__inner {
    border-radius: var(--i-button-border-radius) !important;
  }
}

.el-button--primary {
  border-color: var(--o-color-primary);
}

// 右侧内容区标题
.page-right-title-level1 {
  font-size: $FONT-18;
  padding: 16px 0 0;
}
.page-right-title-level2 {
  font-size: $FONT-16;
  font-weight: 600;
}

// 右侧内容的统一样式,分为2种，一种是padding:24 一种是padding:16 ，16的这种用于下面跟一个表格的
.right-container {
  padding: 24px;
  background-color: var(--o-bg-color-base);
  border-radius: $APP-COMMON-RADIUS;
  margin-right: 24px;
}
.right-container.used-to-table {
  padding: 16px;
}

// selelct下拉框的下拉按钮位置
.el-input__icon {
  display: flex;
}

// 表格的border-color统一调整
.el-table td.el-table__cell {
  border-color: var(--o-border-color-light) !important;
  .cell {
    width: 100% !important;
  }
}
.el-table__expand-column {
  .cell {
    width: 16px !important;
  }
}
// 表格表头竖线需添加border属性
.el-table--border {
  &::before {
    content: none !important;
  }
  &::after {
    content: none !important;
  }
  .el-table__border-left-patch {
    width: 0;
  }
  border: none !important;
  .el-table__cell {
    border-right: none !important;
    border-left: none !important;
  }
  .el-table__inner-wrapper::after {
    width: 0 !important;
  }
}
.el-table {
  tr th:first-of-type,
  tr td:first-of-type {
    padding-left: 16px !important;
  }
}

// tabs的Active横线高度统一为1px
.el-tabs__active-bar {
  height: 1px !important;
}

.el-tabs__item {
  font-size: 14px !important;
  max-width: none !important;
}

// 风格定制化样式, 主要是针对select等直接插入到body中的元素样式
.simple {
  .login-select {
    border: none;
    .el-select-dropdown__item {
      max-width: 100% !important;
    }
  }
}
.beautiful {
  .login-select {
    .el-select-dropdown__item {
      max-width: 100% !important;
    }
  }
}
.standard {
  .login-select {
    .el-select-dropdown__item {
      max-width: 100% !important;
    }
  }
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--o-color-placeholder);
  border-radius: 3px;
}

.el-input {
  line-height: 16px !important;
  .el-input__inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-right: 11px !important;
    line-height: 16px !important;
  }
}

.el-input.el-input--suffix {
  min-width: 100px !important;

  .el-input__inner {
    padding-right: 26px !important;
  }
}

.el-input__inner::-webkit-input-placeholder {
  font-size: 12px !important;
}

.wrap-el-popper {
  max-width: 376px !important;
  white-space: wrap !important;
  font-size: 12px !important;
}

.wrap-popper {
  @extend .wrap-el-popper;
  width: auto !important;
}

.daterange-popper {
  background: #fff !important;
  max-width: none !important;
  border: 1px solid var(--el-datepicker-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;

  .el-popper__arrow {
    z-index: -1;
  }

  .el-popper__arrow::before {
    box-shadow: var(--el-box-shadow-light);
  }
}

.disabled-btn {
  cursor: not-allowed !important;
  color: var(--o-text-color-tertiary) !important;
}

.el-tag.el-tag--primary {
  background-color: var(--o-color-state-primary) !important;
}
.is-light.el-alert--info {
  background-color: var(--o-color-state-primary-secondary) !important;
  .el-alert__icon {
    color: var(--o-color-state-primary) !important;
  }
}
.security-tip {
  max-width: 544px !important;
}
.el-popper.domain-tip {
  max-width: 400px !important;
}
.el-drawer {
  background-color: var(--o-bg-color-base) !important;
}

[theme='dark'] .pro-container .logo img {
  content: url('@/assets/common/image/ibmc-dark.png');
}

[theme='dark'] #iconCode {
  background-image: url('@/assets/common/image/code-dark.png');
}

[theme='dark'] .no-data-img {
  content: url('@/assets/common/image/no-data-dark.svg');
}

[theme='dark'] #captId {
  content: url('@/assets/assets-bmc/default/dark-screenshots.png');
}

[theme='dark'] .cusomize-dialog {
  .cusomize-main-container {
    background-color: rgba(42, 47, 55, 0.5) !important;
  }
  .icon-step1 {
    background: url(/image/dark-customize-1.png) no-repeat center !important;
  }
  .icon-step2 {
    background: url(/image/dark-customize-2.png) no-repeat center !important;
  }
  .icon-step3 {
    background: url(/image/dark-customize-3.png) no-repeat center !important;
  }
  .icon-step4 {
    background: url(/image/dark-customize-4.png) no-repeat center !important;
  }
  .icon-step5 {
    background: url(/image/dark-customize-5.png) no-repeat center !important;
  }
}

.el-select__caret {
  margin-right: 0 !important;
}

.el-popover.el-popper {
  padding: 8px;
  font-size: 12px;
}

.el-table th.el-table__cell,
.el-table .el-table__cell {
  padding-left: 8px !important;
}
.reset-table th.el-table__cell,
.reset-table .el-table__cell {
  padding-left: 16px !important;
}
.el-table .el-table__header-wrapper .cell {
  font-weight: 600;
}

.el-button {
  min-width: 64px;
}

.el-radio-button .el-radio-button__inner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-radio {
  color: var(--o-text-color-secondary) !important;
  --o-radio-border-color: var(--o-text-color-tertiary) !important;
}

.el-tree {
  .el-tree-node__expand-icon {
    margin-right: 0px !important;
  }
}

.el-checkbox__input {
  width: 14px;

  .el-checkbox__inner {
    width: 14px;
    height: 14px;
  }

  .el-checkbox__inner::after {
    top: 2px;
    left: 4px;
  }
}

// 这里的设置是为了让暂无数据居中展示
.el-table {
  height: 100% !important;
  min-height: 172px;

  .el-table__inner-wrapper {
    height: 100%;
    min-height: 172px;

    .el-table__body-wrapper {
      height: calc(100% - 32px);
      min-height: 140px;

      .el-scrollbar {
        height: 100%;
        min-height: 140px;

        .el-scrollbar__wrap {
          position: relative;
          height: 100%;
          min-height: 140px;

          .el-table__empty-block {
            margin-top: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 99px !important;
          }
        }
      }
    }
  }
}

/*
  1. 如果没有数据的时候不展示“暂无数据”，需要给el-table加这个类名:special-table，把最小高度设置为auto
  2. 另外如果不想受最小高度的影响，可以给el-form设置 :class="{'special-table': tableList.length}" 
  tableList即是要绑定的表格数据对象，这样数据较少的时候比如只有1条数据，高度大概是32+48，就不会受最小高度172的影响
*/
.el-table.special-table {
  height: 100% !important;
  min-height: auto;

  .el-table__inner-wrapper {
    height: 100%;
    min-height: auto;

    .el-table__body-wrapper {
      height: 100%;
      min-height: auto;

      .el-scrollbar {
        height: 100%;
        min-height: auto;

        .el-scrollbar__wrap {
          position: relative;
          height: 100%;
          min-height: auto;
        }
      }
    }
  }
}

.el-divider--vertical {
  border-left: 1px var(--o-border-color-light) var(--el-border-style);
}

.el-divider--horizontal {
  border-top: 1px var(--o-border-color-light) var(--el-border-style);
}

.el-menu--horizontal {
  border-bottom: solid 1px var(--o-border-color-light) !important;
  height: auto !important;
}

.el-scrollbar__view.el-select-dropdown__list {
  padding: 4px 0;
}

.el-checkbox__label {
  font-size: 12px !important;
}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.el-form-item__content {
  min-height: 0 !important;
}

.el-dialog__footer .el-button:nth-child(1) {
  margin-right: 0;
}

.el-picker__popper.daterange-popper {
  border-color: var(--o-color-primary-secondary) !important;
  box-shadow: 0 0 1px var(--o-color-primary-secondary) !important;
}

.el-date-table td.in-range .el-date-table-cell {
  border-radius: 2px;
}

:root {
  .el-form-item__label {
    position: relative;
    max-width: none ;
    min-height: 0 !important;
    &::before {
      font-size: 12px;
      position: absolute;
      top: 8px;
      left: -6px !important;
      margin-left: 0 !important;
    }
  }
  .el-drawer__body {
    .el-form-item__label {
      max-width: 140px;
      word-wrap: break-word;
    }
  }
  .el-dialog {
    // CS7.0升级之后会出现padding
    padding: 0px;
    width: var(--el-dialog-width);
    // header样式
    .el-dialog__header {
      margin-right: 0;
    }
  
    .el-dialog__headerbtn {
      top: 2px !important;
      right: 4px !important;
      width: 54px;
      height: 54px;
    }
  }

  .el-input__wrapper {
    box-shadow: 0 0 0 1px var(--o-border-color-lighter) inset;
  }
  .el-select {
    .el-select__wrapper {
      box-shadow: 0 0 0 1px var(--o-border-color-lighter) inset;
    }
  }

  .el-date-range-picker__time-header {
    position: relative;
    border-bottom: 1px solid var(--el-datepicker-inner-border-color);
    font-size: 12px;
    padding: 8px 5px 5px;
    display: table;
    width: 100%;
    box-sizing: border-box;
    .el-date-range-picker__editors-wrap {
      box-sizing: border-box;
      display: table-cell;
      .el-date-range-picker__time-picker-wrap {
        position: relative;
        display: table-cell;
        padding: 0 5px;
        width: 50%;
      }
    }
  }
}

.el-color-picker__panel {
  max-width: none;
  .el-color-hue-slider__bar {
    background: linear-gradient(
      to bottom,
      red 0,
      #ff0 17%,
      #0f0 33%,
      #0ff 50%,
      #00f 67%,
      #f0f 83%,
      red 100%
    ) !important;
  }
}
.el-color-dropdown__btns {
  display: flex;
}
.el-popper[role=tooltip].el-color-picker__panel {
  max-width: none ;
}
.el-select {
  width: auto;
  .select-trigger:hover {
    .el-input__inner {
      box-shadow: var(--o-input-border_hover);
    }
  }

  .el-popper.is-pure.el-select__popper[role='tooltip'] {
    width: 100% !important;

    .el-select-dropdown {
      min-width: calc(100% - 2px) !important;
    }
  }
  .el-select__wrapper{
    font-size: 12px !important;
    border-radius: 2px !important;
  }
  
  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after {
    left: 17px;
    margin-top: 0;
  }
}

.el-message{
  .el-message__content{
    padding-right: 35px;
  }
  .el-message__closeBtn{
    position: absolute;
    right: 19px;
  }
}

.show-tooltip-dom {
  max-width: 86px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 超出后显示点点点,同时添加hover时的tooltip
.overflow-show-point-and-add-tooltip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.left-nav-tooltip {
  font-size: 14px;
}

.el-input__wrapper {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 2px;
  padding-right: 0 !important;
  background-color: rgba(0, 0, 0, 0);

  .el-input__inner {
    box-shadow: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
  }
}

.el-form-item.is-error .el-input__wrapper {
  box-shadow: var(--o-form-item-border-color_error);
  border: 1px solid var(--o-form-item-border-color_error);
  background-color: var(--o-color-danger-secondary);

  .el-input__inner {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

.el-input__suffix-inner > .el-icon {
  position: absolute;
  top: 0 !important;
  transform: translate(-8px, -50%);
  width: 16px;
  height: 16px;
  margin-left: 0px;
}

.el-pagination .el-input__wrapper .el-input__inner {
  padding-right: 0 !important;
}

.el-select .el-input.is-focus .el-input__inner,
.el-pagination .el-select .el-input .el-input__inner,
.el-pagination .el-select .el-input.is-focus .el-input__inner {
  box-shadow: none !important;
}

.el-input__wrapper:hover,
.el-select:hover:not(.el-select--disabled) .el-input__wrapper {
  color: var(--o-input-color_hover);
  background-color: var(--o-input-bg-color_hover);
  box-shadow: var(--o-input-border_hover);
}

.el-select .el-icon {
  margin-right: 0;
}

.el-input__wrapper.is-focus,
.el-pagination__sizes .el-input__wrapper.is-focus {
  color: var(--o-input-color_focus);
  background-color: var(--o-input-bg-color_focus);
  box-shadow: var(--o-input-border_focus);
}

.el-select .el-input__inner:focus {
  box-shadow: none !important;
}

.el-select .el-input .el-input__wrapper.is-focus {
  box-shadow: var(--o-input-border_focus) !important;
}

.el-select .el-input .el-input__wrapper .el-input__inner,
.el-select .el-input.el-input--suffix.is-focus .el-input__wrapper .el-input__inner {
  box-shadow: none !important;
}
.el-tree {
  .el-tree-node__label {
    flex: 1;
    display: flex;
    align-items: center;
  }
}

.el-switch {
  position: relative;
}

.el-switch .el-switch__action {
  left: 1px !important;
}

.el-switch.is-checked .el-switch__action {
  left: 17px !important;
}

.el-switch__core {
  min-width: 32px !important;
}

// 通知栏内容字体颜色
.el-notification__content {
  color: var(--o-text-color-primary) !important;
}

// H3C 定制风格样式
@import '@/assets/common/style/theme/default.scss';
@import '@/assets/common/style/theme/beautiful.scss';
@import '@/assets/common/style/theme/simple.scss';
@import '@/assets/common/style/theme/standard.scss';
