$form-item-disabled-color: $color2; // 表单元素disabled 状态时的字体颜色

/* 改变element-ui颜色变量 */
$--color-primary: $main-color; // 主题蓝

$--table-font-color: $color1; // 表格字体颜色
$--table-header-font-color: $color1; // 表格表头字体颜色
$--table-header-background-color: #f5f7fa; // 表格表头背景色
$--table-border-color: $tableBorderColor; // 表格边框色
$--table-row-hover-background-color: $table-hover; // 表格鼠标移入时别背景色

$--radio-checked-font-color: $color1;
$--checkbox-checked-font-color: $color1;
$--radio-checked-icon-color: #fff;

$--disabled-fill-base: #eee; // 表单元素只读时的背景色
$--input-disabled-color: $form-item-disabled-color; // 表单元素只读时字体的颜色

$--popover-font-size: 12px;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '../fonts';

//@import "~bio-ui-vue2/packages/theme-chalk/src/index";

// 单选多选 disabled 状态 label的字体颜色
.el-radio__input.is-disabled + span.el-radio__label,
.el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: $form-item-disabled-color;
}

/*el-dialog*/
.el-dialog__wrapper {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  &.dialog-fade-leave-active {
    -ms-animation: none;
  }
}

.el-dialog {
  display: flex;
  max-height: 90%;
  border-radius: $radius;
  position: relative;
  margin: 0 !important;
  overflow: hidden;
  flex-direction: column;
  @media (max-width: 1400px) {
    max-height: 96%;
  }

  &__header {
    padding: 20px 40px 20px 20px;
    @media (max-width: 1400px) {
      padding: 15px 35px 15px 15px;
    }
  }

  &__title {
    line-height: 20px;
    font-weight: bold;
    @include media-fs16;

    &__icon {
      margin-left: 10px;
      cursor: pointer;
      color: $main-color;
      font-size: 16px !important;
    }
  }

  &__body {
    @include flex-1;
    overflow: auto;
    padding: 0 20px 20px;
    color: $color1;
    @media (max-width: 1400px) {
      padding: 0 15px 15px;
    }
  }

  &__footer {
    @media (max-width: 1400px) {
      padding: 15px;
    }
  }

  &__headerbtn {
    @media (max-width: 1400px) {
      top: 15px;
      right: 15px;
    }

    &:hover, &:focus {
      .el-dialog__close {
        color: $red;
        font-weight: bold;
      }
    }
  }
}

/*el-message*/
.el-message-box__title {
  font-weight: bold;
  @include media-fs16;
}

.el-table {
  th {
    border-top: 1px solid $--table-border-color;

    .cell {
      padding-left: 5px;
      padding-right: 5px;
    }
  }

  .invalid-row {
    color: #acadad;

    &.el-table__row--striped {
      td {
        background-color: #fdfdfd;
      }
    }
  }

  .cell {
    word-break: break-word;
  }

  &--mini {
    th {
      padding: 4px 0;

      &.is-sortable {
        padding: 0;
      }
    }

    td {
      padding: 3px 0;
    }

    .el-form-item__content,
    .el-form-item__label,
    .el-radio__label,
    .el-radio,
    .el-checkbox,
    .el-checkbox__label,
    .el-input--small {
      font-size: 12px;
    }

    .cell {
      padding-left: 5px;
      padding-right: 5px;

      .caret-wrapper {
        width: 15px;

        .sort-caret {
          left: 2px;
        }
      }
    }
  }

  &--group {
    border: 0;

    &::after {
      width: 0;
    }

    td {
      border-top: 0;
      border-left: 0;
      border-right: 0;
    }
  }

  &__empty-block {
    min-height: 180px;

    .bio-icon__nodata {
      font-size: 80px;
    }

    .empty-text {
      line-height: 30px;
    }
  }

  &__empty-text {
    color: $color5;
    line-height: normal;
  }

  &.inner-table {
    .el-table__empty-block {
      min-height: 90px;

      .bio-icon__nodata {
        font-size: 50px;
      }

      .empty-text {
        line-height: 20px;
      }
    }
  }

  &.border-bottom-none {
    &:before {
      display: none;
    }
  }

  .el-button {
    &--text {
      padding: 0;
    }
  }
}

.el-popover {
  color: $color1;

  .el-table__empty-block {
    min-height: 60px;
  }
}

/*el-pagination*/
.el-pagination {
  &--small {
    .el-select .el-input .el-input__inner {
      height: 22px;
      line-height: 22px;
    }
  }

  &__jump {
    margin-left: 0;
  }

  &__sizes {
    .el-input--mini .el-input__icon {
      line-height: 22px;
    }
  }
}

/*el-form*/
.el-form-item {
  &__label {
    color: $color1;
  }

  &--mini {
    .el-form-item__content,
    .el-form-item__label,
    .el-radio__label,
    .el-radio,
    .el-checkbox,
    .el-checkbox__label,
    .el-input--small {
      font-size: 12px;
      word-break: break-word;
    }

    &.el-form-item {
      margin-bottom: 15px;
    }
  }
}

.el-switch {
  &--mini {
    .el-switch__core {
      height: 16px;
      width: 28px !important;

      &:after {
        width: 12px;
        height: 12px;
      }
    }

    &.is-checked {
      .el-switch__core::after {
        margin-left: -13px;
      }
    }
  }
}

.el-radio,
.el-checkbox {
  font-weight: normal;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.el-radio {
  &__input {
    &.is-checked {
      .el-radio__inner {
        &::after {
          width: 6px;
          height: 6px;
          background-color: $main-color;
        }
      }
    }

    &.is-disabled {
      cursor: not-allowed;
    }
  }
}

.el-checkbox {
  &__input {
    &.is-checked {
      .el-checkbox__inner {
        background-color: #fff;

        &::after {
          border-color: $main-color;
        }
      }
    }

    &.is-disabled {
      cursor: not-allowed;
    }
  }
}

.el-input {
  &__inner {
    padding: 0 8px;
  }

  &--mini {
    .el-input__prefix {
      left: 0;
    }

    .el-input__suffix {
      right: 0;
    }

    &.el-input--prefix .el-input__inner {
      padding-left: 25px;
    }

    &.el-input--suffix .el-input__inner {
      padding-right: 25px;
    }
  }
}

.el-input__suffix {
  .el-icon-circle-check {
    color: $green;
  }

  &-inner {
    .el-icon-circle-close {
      color: $red !important;

      &:hover {
        color: $red !important;
      }
    }
  }
}

.el-select-dropdown {
  &.max-height-none {
    .el-select-dropdown__wrap {
      max-height: 320px;
    }
  }
}

.el-select-dropdown.is-multiple {
  .el-select-dropdown__item.selected:after {
    right: 8px;
  }
}

.el-select {
  &__tags > span {
    width: 100%;
  }

  .el-tag--info {
    max-width: 100%;
    position: relative;
    padding-right: 20px;
    @include only-one-line;

    .el-tag__close {
      position: absolute;
      right: 2px;
      top: 2px;
    }
  }
}

/*关闭按钮*/
.el-icon-close {
  font-size: 18px;
  cursor: pointer;
  transition: all linear .2s;

  &:hover {
    color: $red !important;
    font-weight: bold;
  }
}

.el-button.is-disabled .el-icon-close {
  cursor: not-allowed;
  color: #C0C4CC;

  &:hover {
    color: #C0C4CC;
    font-weight: normal;
  }
}

/*el-transfer*/
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
  font-size: 14px;
}

.el-transfer-panel__item.el-checkbox {
  display: block;
}

/*el-button*/
.el-button {
  &--mini {
    border-radius: 4px;
    padding: 7px 10px;
  }

  &--width {
    min-width: 90px;
  }

  &--text {
    font-weight: normal;
  }

  // 辅助录入按钮
  &.assist-btn {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    margin-left: 5px;

    &:not(:hover):not(:focus) {
      border-color: #E4E7ED;
    }

    &.is-disabled {
      background-color: $--disabled-fill-base;
      color: $--input-disabled-color;

      &:hover, &:focus, &:active {
        background-color: $--disabled-fill-base;
        color: $--input-disabled-color;
      }
    }
  }
}

/*el-tabs*/
.el-tabs {
  &__header {
    margin-bottom: 10px;
  }

  &__item {
    font-weight: normal;
    height: 34px;
    line-height: 34px;
    @media (max-width: 1400px) {
      height: 30px;
      line-height: 30px;
    }

    &.is-active {
      font-weight: 500;
    }
  }
}

/*el-dropdown*/
.el-dropdown-menu {
  &__item {
    line-height: 30px;
  }
}

.el-message {
  min-width: 280px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2) !important;
  background: #fff !important;
  border: 0 !important;
  padding: 15px;

  &__content {
    color: $color1 !important;
  }

  &__icon {
    font-size: 14px;
  }

  &.is-closable {
    .el-message__content {
      padding-right: 25px;
    }
  }
}

// 统一更改message-box中按钮的大小，无需单独设置
.el-message-box {
  .el-button {
    border-radius: 4px;
    padding: 7px 10px;
  }
}

.el-image-viewer {
  &__close {
    .el-icon-close {
      color: #fff;
    }
  }

  &__wrapper {
    .is-disabled {
      color: $color3;

      &:hover {
        cursor: not-allowed;
      }
    }
  }

  &__canvas {
    position: relative;

    #ocr-tag {
      position: fixed;
      z-index: 2020;
      border: 1px solid red;
      display: none;
    }
  }

  &__actions {
    width: 100%;
    left: 0;
    right: 0;
    transform: translateX(0);
    background: transparent;
    padding: 0;

    &.viewer__arrow__action {
      .el-image-viewer__actions__inner {
        width: auto;

        & > i {
          margin: 0 2px;
        }
      }

      i.el-image-viewer__actions__divider {
        margin: 0 5px;
      }
    }

    &__inner {
      width: 250px;
      background-color: #606266;
      padding: 0 23px;
      border-radius: 22px;
    }
  }
}

$tooltip-light-border-color: hsla(0, 0%, 85%, .5);

.el-tooltip__popper {
  &.is-light {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    border-color: transparent;

    &[x-placement^=bottom] {
      .popper__arrow {
        border-bottom-color: $tooltip-light-border-color;

        &::after {
          border-bottom-color: #fff;
        }
      }
    }

    &[x-placement^=top] {
      .popper__arrow {
        border-top-color: $tooltip-light-border-color;

        &::after {
          border-top-color: #fff;
        }
      }
    }

    &[x-placement^=left] {
      .popper__arrow {
        border-left-color: $tooltip-light-border-color;

        &::after {
          border-left-color: #fff;
        }
      }
    }

    &[x-placement^=right] {
      .popper__arrow {
        border-right-color: $tooltip-light-border-color;

        &::after {
          border-right-color: #fff;
        }
      }
    }
  }
}

body > .el-tooltip__popper {
  max-width: 50%;
}

.el-menu {
  &--popup {
    padding: 0;
    border-radius: $radius;

    .el-menu-item {
      height: 40px;
      line-height: 40px;
    }
  }
}