@import './theme/default';
@import './theme/font';

@mixin border($direct: null) {
  @if $direct {
    @include theme-color(border-#{$direct}-color, stroke, 5);
    border-#{$direct}-width: 1px;
    border-#{$direct}-style: solid;
  } @else {
    @include theme-color(border-color, stroke, 5);
    border-width: 1px;
    border-style: solid;
  }
}

// 内容伸展时的 tab 额外样式
@mixin content-stretch($selector) {
  &.zent-tabs-nav__stretch {
    #{$selector} {
      flex: 1 1 auto;
    }
  }
}

.zent-tabs {
  @include font-normal;
  display: flex;
  flex-direction: column;

  &-panel-wrapper {
    margin-top: 16px;
  }

  &-nav {
    position: relative;
    outline: none;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;

    &-content {
      flex: 1 1 auto;
      overflow: hidden;
    }

    &-extra-content {
      display: flex;
      align-items: center;
      margin-left: 8px;
    }
  }

  &-scroll {
    white-space: nowrap;
    overflow-x: auto;
    display: flex;
  }

  &-tab {
    @include theme-color(color, stroke, 2);
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;

    &-delete {
      @include theme-color(color, stroke, 3);
      line-height: 1;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      font-size: $font-size-normal;
      display: none;
    }

    &:hover {
      @include theme-color(color, stroke, 1);

      .zent-tabs-tab-delete {
        display: block;
      }
    }

    &__actived {
      @include theme-color(color, stroke, 1);
      @include theme-color(#fff, stroke, 9);
    }

    &__disabled {
      @include theme-color(color, stroke, 4);

      &.zent-tabs-tab {
        cursor: not-allowed;

        &:hover {
          @include theme-color(color, stroke, 4);
        }
      }
    }
  }
}

// 普通模式样式
.zent-tabs-nav-type__normal {
  @include content-stretch('.zent-tabs-tab');
  @include border(bottom);
  height: 34px;

  .zent-tabs-nav-content {
    padding: 0;
    margin-bottom: -1px;
  }

  .zent-tabs-tab {
    padding: 0;

    &-inner {
      padding: 0 16px;
    }

    &__actived {
      @include border(bottom);

      .zent-tabs-tab-inner {
        @include theme-color(border-bottom-color, primary, 4);
        border-bottom-width: 2px;
        border-bottom-style: solid;
        padding: 0 16px 12px;
        margin-bottom: -1px;
      }
    }
  }
}

// 卡片模式样式
.zent-tabs-nav-type__card {
  @include content-stretch('.zent-tabs-tab');
  @include border(bottom);
  height: 40px;

  .zent-tabs-nav-content {
    margin-bottom: -1px;
  }

  .zent-tabs-tab {
    @include border;
    @include theme-color(background-color, stroke, 8);
    border-left: 0;
    min-width: 104px;

    &-inner {
      padding: 9px 16px;
    }

    &:first-child {
      @include border(left);
      border-top-left-radius: 4px;
    }

    &:last-child {
      border-top-right-radius: 4px;
    }

    &__actived {
      @include theme-color(background-color, stroke, 9);
      border-bottom-color: transparent;
    }
  }
}

// 按钮模式样式
.zent-tabs-nav-type__button {
  @include content-stretch('.zent-btn');

  .zent-tabs-tab {
    @include theme-color(background-color, stroke, 9);
    @include theme-color(color, stroke, 3);
    @include border;
    min-width: 80px;
    height: 32px;

    &-inner {
      padding: 5px 16px;
    }

    &:not(:first-child) {
      margin-left: -1px;
    }

    &:first-child {
      border-radius: 2px 0 0 2px;
    }

    &:last-child {
      border-radius: 0 2px 2px 0;
    }

    &:hover:not(.zent-tabs-tab__disabled) {
      @include theme-color(color, primary, 4);
    }

    &__actived {
      @include theme-color(background-color, primary, 8);
      @include theme-color(border-color, primary, 4);
      @include theme-color(color, primary, 4);
      z-index: 1;
    }

    &__disabled {
      @include theme-color(background-color, stroke, 8);
      @include theme-color(color, stroke, 4);
    }
  }
}

// 垂直模式样式
.zent-tabs-type__vertical {
  flex-direction: row;

  .zent-tabs-panel-wrapper {
    margin: 14px 16px;
  }

  .zent-tabs-nav-type__vertical {
    @include border(right);
    width: 96px;
    padding: 14px 7px 14px 0;

    .zent-tabs-scroll {
      overflow-x: hidden;
      overflow-y: auto;
      width: 103px;
      flex-direction: column;
    }

    .zent-tabs-divide {
      @include theme-color(border-bottom-color, stroke, 6);
      border-bottom-width: 1px;
      border-bottom-style: solid;
      margin: 21.5px 0 17.5px;
    }

    .zent-tabs-tab {
      display: block;
      text-align: left;
      margin-top: 4px;

      &:first-child {
        margin-top: 0;
      }

      &__actived {
        .zent-tabs-tab-inner {
          @include theme-color(background-color, stroke, 6);
        }
      }

      &-inner {
        border-radius: 2px;
        padding: 8px;
        overflow: hidden;
        width: 86px;
        box-sizing: border-box;
        text-overflow: ellipsis;
      }
    }
  }
}