@mixin ik-svg-icon-mix-hover() {
  .ik-svg-icon.ik-icon {
    --ik-color-icon-dark: var(--ik-color-tag-primary);
    --ik-color-icon-light: var(--ik-color-icon-light-hover);

    background-color: var(--ik-color-bg-button-secondary);
  }
}

@mixin ik-svg-icon-mix-warning() {
  .ik-svg-icon.ik-icon {
    --ik-color-icon-dark: var(--ik-color-error);
    --ik-color-icon-light: var(--ik-color-icon-error-light);

    background-color: var(--ik-color-icon-error-bg);
  }
}

@mixin ik-svg-icon-mix-active() {
  .ik-svg-icon.ik-icon {
    --ik-color-icon-dark: var(--ik-color-tag-primary);
    --ik-color-icon-light: var(--ik-color-icon-light-hover);

    background-color: var(--ik-color-bg-button-secondary);

    &.warning {
      --ik-color-icon-dark: var(--ik-color-error);
      --ik-color-icon-light: var(--ik-color-icon-error-light);

      background-color: var(--ik-color-icon-error-bg);
    }
  }
}
// 常用样式
.title-info {
  color: var(--ik-color-font-secondary);
}

// ===================GL STYLE===============================================================================
.gl-padding {
  box-sizing: border-box;
  // flex: 1;flexflex
  // width: calc(100% - var(--ik-main-sidebar-actual-width) - var(--ik-sub-sidebar-actual-width));widthwidth
  margin: var(--ik-content-margin);
  background-color: var(--ik-color-bg-page-content);
  border-radius: var(--ik-border-radius-l);
  will-change: width;
}

.gl-search-card {
  border: none;
}

// 页面自适应高度
.gl-absolute-container {
  position: absolute;
  overflow: auto;
}

// 页面容器
.gl-absolute-container,
.gl-container {
  display: flex;
  flex-direction: column;
  // 间距宽度 * 2
  width: calc(100% - 48px);
  height: calc(100% - 24px);
  border-radius: 12px;

  &.fixed-height {
    height: calc(100% - 24px) !important;
    overflow: hidden;
  }
}

.gl-item-list {
  li {
    &:hover {
      background-color: var(--ik-color-bg-input-hover);

      @include ik-svg-icon-mix-active;
    }

    &.active {
      .ik-svg-icon.ik-icon {
        --ik-color-icon-dark: var(--ik-color-tag-primary);
        --ik-color-icon-light: var(--ik-color-icon-light-hover);

        background-color: var(--ik-color-bg-button-secondary);

        &.warning {
          --ik-color-icon-dark: var(--ik-color-error);
          --ik-color-icon-light: var(--ik-color-icon-error-light);

          background-color: var(--ik-color-icon-error-bg);
        }
      }
    }
  }
}
// =========================GL STYLE END================================================================================

.el-message {
  padding: var(--ik-margin-s-10) var(--ik-margin-s-8);
  background-color: var(--ik-color-bg-page-content);
  border: none;
  box-shadow: var(--ik-shadow-s);

  .el-message__icon {
    font-size: var(--ik-font-size-t5);
  }

  .el-message__content,
  .el-message__closeBtn {
    color: var(--ik-color-font-title);
  }

  .el-message__closeBtn {
    right: var(--ik-margin-s-8);
  }
}

// IkSvgIcon
.ik-svg-icon.ik-icon {
  cursor: pointer;
  border-radius: var(--ik-border-radius-s);
  transition: all var(--ts-time-base) ease-in-out;

  &:hover {
    --ik-color-icon-dark: var(--ik-color-tag-primary);
    --ik-color-icon-light: var(--ik-color-icon-light-hover);
  }

  &.active {
    --ik-color-icon-dark: var(--ik-color-tag-primary);
    --ik-color-icon-light: var(--ik-color-icon-light-hover);
  }

  &.bg,
  &.show-bg {
    --ik-color-icon-dark: var(--ik-color-bgicon-dark);
    --ik-color-icon-light: var(--ik-color-bgicon-light);

    background-color: var(--ik-color-bg-icon);

    &:hover {
      --ik-color-icon-dark: var(--ik-color-tag-primary);
      --ik-color-icon-light: var(--ik-color-icon-light-hover);

      background-color: var(--ik-color-bg-button-secondary);
    }

    &.active {
      --ik-color-icon-dark: var(--ik-color-tag-primary);
      --ik-color-icon-light: var(--ik-color-icon-light-hover);

      background-color: var(--ik-color-bg-button-secondary);
    }
  }

  &.warning {
    &:hover {
      --ik-color-icon-dark: var(--ik-color-error);
      --ik-color-icon-light: var(--ik-color-icon-error-light);
    }

    &.bg,
    &.show-bg {
      &:hover {
        background-color: var(--ik-color-icon-error-bg);
      }
    }

    &.active {
      background-color: var(--ik-color-icon-error-bg);
    }
  }

  &:not(:first-child) {
    margin-left: var(--ik-margin-s-12);
  }

  &.default {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  &.small {
    width: 32px;
    height: 32px;
    font-size: 16px !important;
  }

  &.big {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

.el-form-item {
  --el-fill-color-blank: transparent;
  --el-border-radius-base: var(--ik-border-radius-s);

  // align-items: center;

  .el-form-item__label {
    position: relative;
    height: var(--ik-base-height);
    line-height: var(--ik-base-height);
    pointer-events: none;

    &::before {
      position: unset;
      margin-right: 1px !important;
    }
  }
}

// 表单组件色值
.el-input {
  --el-input-bg-color: var(--ik-color-bg-form);
}

.el-input__wrapper,
.el-textarea__inner {
  --el-input-bg-color: var(--ik-color-bg-form);

  &:hover {
    --el-input-bg-color: var(--ik-color-bg-input-hover);

    box-shadow: none;
  }

  &.is-focus {
    box-shadow: 0 0 0 1px var(--ik-color-primary) inset;
  }
}

.el-select__wrapper {
  min-height: var(--ik-base-height);
  background-color: var(--ik-color-bg-form);
  box-shadow: none;

  &:hover {
    background-color: var(--ik-color-bg-input-hover);
  }

  &.is-hovering:not(.is-focused) {
    box-shadow: none;
  }

  .el-select__input {
    // margin-left: 0;margin-leftmargin-leftmargin-leftmargin-left
  }
}

.el-checkbox {
  --el-checkbox-input-height: 16px;
  --el-checkbox-input-width: 16px;
  --el-checkbox-input-border: none;

  .el-checkbox__input {
    &.is-checked {
      .el-checkbox__inner {
        background-color: var(--el-checkbox-checked-bg-color);

        &::after {
          border-color: var(--el-checkbox-checked-icon-color);
        }
      }
    }

    &.is-indeterminate {
      .el-checkbox__inner {
        background-color: var(--el-checkbox-checked-bg-color);

        &::before {
          top: 11px;
        }
      }
    }
  }

  .el-checkbox__inner {
    background-color: var(--el-checkbox-bg-color);
    border-radius: 3px;

    &::after {
      top: 1px;
      left: 5px;
      width: 5px;
      height: 10px;
      border-color: var(--el-checkbox-bg-color);
      transform: rotate(45deg) scaleY(1);
    }
  }

  &.is-checked {
    .el-checkbox__label {
      color: var(--ik-color-font-title);
    }
  }
}

// el-dialog
.el-dialog {
  --el-dialog-padding-primary: 0 28px;

  transition: width, height 0.25s linear;

  .el-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding-bottom: 0;
    font-size: 16px;
    border-bottom: 1px solid var(--ik-color-divider);

    .icon-dialog-full {
      top: 22px;
      right: 55px;
    }

    .el-dialog__headerbtn {
      position: unset;
      width: unset;
      height: unset;
    }

    .el-dialog__title {
      color: var(--ik-color-font-title);
    }
  }

  .el-dialog__body {
    // -64 - 72
    height: calc(100% - 136px);
    padding: 0;
  }

  .el-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 72px;
    padding-top: 0;
    border-top: 1px solid var(--ik-color-divider);
  }
}

// el-switch
.el-switch {
  --el-switch-off-color: var(--ik-color-icon-light);
}

.el-popper {
  --el-bg-color-overlay: var(--ik-color-bg-page-content);
}

.el-table {
  // 空数据自动添加--
  .cell:empty::before {
    color: var(--el-color-info-light-3);
    content: "--";
  }

  .el-table__header thead {
    height: 48px;
  }

  .el-table__body-wrapper {
    tbody tr {
      height: 60px;
    }

    .ik-svg-icon.ik-icon {
      --ik-color-icon-dark: var(--ik-color-bgicon-dark);
      --ik-color-icon-light: var(--ik-color-bgicon-light);

      background-color: var(--ik-color-bg-icon);

      &:hover {
        --ik-color-icon-dark: var(--ik-color-tag-primary);
        --ik-color-icon-light: var(--ik-color-icon-light-hover);

        background-color: var(--ik-color-bg-button-secondary);
      }

      &.warning {
        &:hover {
          --ik-color-icon-dark: var(--ik-color-error);
          --ik-color-icon-light: var(--ik-color-icon-error-light);

          background-color: var(--ik-color-icon-error-bg);

          &.active {
            background-color: var(--ik-color-icon-error-bg);
          }
        }
      }

      &:not(:first-child) {
        margin-left: var(--ik-margin-s-10);
      }
    }
    // 悬浮某行时，图标进入悬浮状态
    .el-table__row.hover-row,
    .el-table__row.current-row {
      .ik-svg-icon.ik-icon {
        --ik-color-icon-dark: var(--ik-color-tag-primary);
        --ik-color-icon-light: var(--ik-color-icon-light-hover);

        background-color: var(--ik-color-bg-button-secondary);

        &.warning {
          --ik-color-icon-dark: var(--ik-color-error);
          --ik-color-icon-light: var(--ik-color-icon-error-light);

          background-color: var(--ik-color-icon-error-bg);
        }
      }
    }

    .el-table__row--striped {
      td.el-table__cell {
        background-color: var(--ik-table-striped-color) !important;
      }
    }
  }

  &.el-table--striped {
    .el-table__row.hover-row {
      td.el-table__cell {
        background-color: var(--ik-table-striped-hover-color) !important;
      }
    }
  }
}

.el-pagination {
  height: 60px;
  padding: 0 16px;

  .el-pager {
    li.is-active {
      color: var(--ik-color-font-reverse);
      background-color: var(--ik-color-primary);
    }
  }

  .el-select {
    width: 110px;

    .el-select__wrapper {
      height: var(--ik-pagination-height);
      min-height: auto;
    }
  }

  .el-input {
    height: var(--ik-pagination-height);
  }
}

.el-tree-node {
  .el-tree-node__content {
    height: 40px;
    border-radius: var(--ik-border-radius-s);
    transition: background-color 0.25s;
  }
}

.el-table--fit {
  height: 100%;

  .el-scrollbar__view {
    display: flex;
    flex-direction: column;
    height: 100%;

    .el-table__empty-block {
      display: flex;
      align-items: center;

      .el-table__empty-text {
        position: relative;
        min-height: 240px;
        color: transparent;
        background-image: url("@main/assets/images/statu/kong.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 180px;
        opacity: 0;
        animation: empty-text 0.1s forwards;
        animation-delay: 0.35s;

        &::after {
          position: absolute;
          bottom: 0;
          left: 50%;
          color: var(--ik-color-font-normal);
          content: "找不到相关的结果";
          transform: translateX(-50%);
        }
      }
    }

    @keyframes empty-text {
      0% {
        opacity: 0;
      }

      99% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  }
}