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

/* 页签圆点风格 */
.nav-tabs-dot.nav-tabs {
  .el-tabs__item {
    border-right: 1px solid $--border-color-extra-light;

    &:before {
      content: '';
      width: 9px;
      height: 9px;
      margin-right: 8px;
      border-radius: 50%;
      display: inline-block;
      background: $--border-color-base;
      transition: background-color 0.2s;
    }

    &.is-active:before {
      background: $--color-primary;
    }

    &:after {
      display: none;
    }

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

  .el-tabs__nav-wrap:before,
  .el-tabs__nav-prev {
    border-right: 1px solid $--border-color-extra-light;
  }

  .el-tabs__nav-wrap:after,
  .el-tabs__nav-next,
  .nav-tabs-drop .el-icon-arrow-down {
    border-left: 1px solid $--border-color-extra-light;
  }
}

/* 页签卡片风格 */
@mixin card-tab-item {
  border-radius: 4px;
  height: calc(#{$--tabs-height} - #{$--tabs-card-padding});
  line-height: calc(#{$--tabs-height} - #{$--tabs-card-padding});
}

.nav-tabs-card.nav-tabs {
  padding-top: $--tabs-card-padding;
  background: $--layout-body-background;
  box-shadow: 0 $--tabs-card-padding 0 $--layout-body-background;

  .el-tabs__item {
    @include card-tab-item;
    background: $--color-white;

    &:after {
      display: none;
    }

    &.is-active {
      background: $--color-white;
    }

    & + .el-tabs__item {
      margin-left: $--tabs-card-padding;
    }

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

  .el-tabs__nav-wrap {
    &:before,
    &:after {
      @include card-tab-item;
    }
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    @include card-tab-item;
    background: none;
  }

  .nav-tabs-drop {
    top: $--tabs-card-padding;
    right: $--tabs-card-padding;

    .el-icon-arrow-down {
      @include card-tab-item;
      width: calc(#{$--tabs-height} - #{$--tabs-card-padding});
      background: $--color-white;
    }
  }

  & + .ele-admin-content {
    margin-top: $--tabs-card-padding;

    & > .ele-admin-content-view > .ele-body:first-child {
      padding-top: 0;
    }
  }
}
