@import '../themes/default.scss';

/* 页签栏 */
.nav-tabs {
  height: $--tabs-height;
  min-height: $--tabs-height;
  overflow-y: hidden;
  background: $--color-white;
  box-shadow: $--header-light-shadow;
  box-sizing: border-box;
  position: relative;
  transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, left 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;

  .el-tabs__item {
    height: $--tabs-height;
    line-height: $--tabs-height;
    color: $--color-text-secondary;
    transition: background-color 0.2s, color 0.2s;
    padding: 0 15px !important;

    &.is-closable {
      padding-right: 8px !important;
    }

    &:after {
      content: '';
      width: 0;
      height: 2px;
      background: $--color-primary;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    &:hover {
      color: $--color-text-primary;
      background: $--header-tool-hover-bg;
    }

    &.is-active {
      color: $--color-primary;
      background: $--menu-item-hover-fill;

      &:after {
        width: 100%;
      }
    }

    .el-icon-close {
      font-size: 13px;
      margin-left: 4px;
      color: $--color-text-secondary;
      position: relative;
      z-index: 2;

      &:before {
        transform: none;
        display: inline;
      }

      &:hover {
        color: #fff;
        background: $--color-danger;
      }
    }

    &:focus.is-active.is-focus:not(:active) {
      box-shadow: none;
      border-radius: 0;
    }
  }

  .el-tabs__active-bar,
  .el-tabs__content {
    display: none;
  }

  @mixin tabs-btn {
    width: $--tabs-height;
    height: $--tabs-height;
    line-height: $--tabs-height;
    color: $--color-text-secondary;
    font-size: $--font-size-medium;
    transition: background-color 0.2s, color 0.2s;
    box-sizing: border-box;
    text-align: center;

    &:hover {
      color: $--color-text-primary;
      background: $--header-tool-hover-bg;
    }
  }

  .el-tabs__nav-wrap {
    padding: 0 $--tabs-height;

    &:before,
    &:after {
      @include tabs-btn;
      content: '\e6de';
      position: absolute;
      top: 0;
      left: 0;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      font-family: 'element-icons' !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      cursor: not-allowed;
    }

    &:after {
      right: 0;
      left: auto;
      bottom: auto;
      height: auto;
      background: none;
      content: '\e6e0';
    }

    &.is-scrollable {
      padding: 0 ($--tabs-height - 1px) 0 $--tabs-height;

      &:before,
      &:after {
        display: none;
      }
    }
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    @include tabs-btn;

    i {
      vertical-align: -1px;
    }
  }

  .ele-admin-tabs-drop {
    position: absolute;
    right: 0;
    top: 0;

    .el-icon-arrow-down {
      @include tabs-btn;
      display: inline-block;
      cursor: pointer;
    }
  }

  .ele-admin-tab-context-trigger {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
  }

  .ele-admin-tab-context-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
  }
}

/* 下拉菜单样式优化 */
.ele-dropdown-menu-pro {
  .el-dropdown-menu__item > i {
    margin-right: 8px;

    &.el-icon-back,
    &.el-icon-right {
      transform: scale(1.2);
    }

    &.el-icon-close,
    &.el-icon-circle-close,
    &.el-icon-remove-outline,
    &.el-icon-_compress {
      transform: scale(1.1);
    }

    &.el-icon-refresh-right {
      transform: scale(1.15);
    }
  }
}

/* 开启页签栏后顶栏阴影调整 */
.ele-admin-show-tabs:not(.ele-admin-tab-card):not(.ele-admin-head-dark) {
  .ele-admin-header {
    box-shadow: $--sidebar-width -1px 0 $--border-color-extra-light inset;
    transition: padding-left $--sidebar-transition-anim,
      box-shadow $--sidebar-transition-anim;
  }

  &.ele-admin-collapse .ele-admin-header {
    box-shadow: $--sidebar-collapse-width -1px 0 $--border-color-extra-light inset;
  }

  &.ele-admin-side-mix {
    .ele-admin-header {
      box-shadow: $--sidebar-nav-width -1px 0 $--border-color-extra-light inset;
    }

    &.ele-admin-nav-collapse:not(.ele-admin-logo-auto) .ele-admin-header {
      box-shadow: $--sidebar-collapse-width -1px 0 $--border-color-extra-light inset;
    }
  }

  &.ele-admin-logo-auto .ele-admin-header {
    box-shadow: 0 -1px 0 $--border-color-extra-light inset;
  }
}
