@import './theme/default';
@import './theme/font';
@import './theme/timing-functions';

@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;
    }
  }
}

@mixin inset-box-shadow($offsetX) {
  content: '';
  position: absolute;
  z-index: 1;
  width: 5px;
  height: 100%;
  box-shadow: inset #{$offsetX}px 0 5px -5px $theme-stroke-4;
  box-shadow: inset #{$offsetX}px 0 5px -5px theme-rgb(stroke, 4);
}

.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;
    }

    &-tabs-content-add,
    &-tabs-content-slide,
    &-tabs-content-anchor {
      width: 100%;
      display: flex;
      flex-grow: 1;
      align-items: flex-end;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      height: 40px;

      &-main {
        display: flex;
        transition: transform 200ms $timing-fn-ease-in-out-cubic;
      }

      &-main--has-add .zent-tabs-tab.zent-tabs-tab-type__card:last-child {
        border-top-right-radius: 0;
      }

      &__add-btn {
        @include theme-color(border-color, stroke, 5);
        @include theme-color(background-color, stroke, 8);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 100%;
        font-size: 20px;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-right-width: 1px;
        border-style: solid;
        border-top-right-radius: 2px;
        box-sizing: border-box;
        cursor: pointer;
      }

      .zent-tabs-tab {
        flex-shrink: 0;
      }

      &-left::before {
        @include inset-box-shadow(5);

        left: 0;
      }

      &-right::after {
        @include inset-box-shadow(-5);

        right: 0;
      }

      &-option {
        @include theme-color(background-color, stroke, 9);

        height: 100%;
        display: flex;
        align-items: center;

        .zenticon {
          @include theme-color(color, stroke, 1);

          padding: 0 6px;
          font-size: $font-size-h4;
        }

        .zenticon-more {
          font-size: $font-size-h3;
          padding: 7px;
        }

        .zenticon + .zenticon {
          margin-left: 4px;
        }

        .icon-disabled {
          @include theme-color(color, stroke, 4);
          cursor: not-allowed;
        }

        &__add-btn {
          @include theme-color(background-color, stroke, 9);
          border-top-width: 0;
          border-right-width: 0;
          cursor: pointer;
        }
      }

      &-option--right {
        box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }

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

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

    &__actions {
      @include theme-color(color, stroke, 3);
      background-image: linear-gradient(
        270deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 81%,
        transparent 100%
      );
      position: absolute;
      height: calc(100% - 2px);
      top: 50%;
      right: 4px;
      transform: translateY(-50%);
      padding-left: 4px;
      font-size: $font-size-normal;
      display: flex;
      align-items: center;
      &:not(.zent-tabs-tab-actions--fixed) {
        display: none;
      }

      & > span:hover {
        @include theme-color(color, stroke, 1);
        line-height: 1;
      }

      &__fixed {
        margin-left: 4px;
      }

      .zent-tabs-tab-actions--fixed &__fixed > i {
        transform: rotate(-45deg);
      }
    }

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

      .zent-tabs-tab__actions {
        display: flex;
      }
    }

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

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

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

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

.zent-tabs-hidden {
  &-tabs {
    @include theme-color(background-color, stroke, 9);
    @include theme-shadow(modal);
    width: 148px;
    border-radius: 2px;
    max-height: 256px;
    overflow-y: scroll;
  }

  &-tab {
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

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

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

      &:hover {
        @include theme-color(background-color, stroke, 9);
        cursor: not-allowed;
      }
    }
  }
}

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

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

  .zent-tabs-tab {
    padding: 0 20px;

    &-inner {
      min-width: 56px;
      line-height: 40px;
      text-align: center;
      height: 40px;
      box-sizing: border-box;
    }

    &__actived {
      @include border(bottom);

      .zent-tabs-tab-inner {
        @include theme-color(border-bottom-color, primary, 4);
        border-bottom-width: 2px;
        border-bottom-style: solid;
        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;
    height: 40px;
    box-sizing: border-box;
    padding: 0 20px 0 19px;

    &:not(.zent-tabs-tab__actived) .zent-tabs-tab__actions {
      background-image: linear-gradient(90deg, transparent 0%, $gray-200 19%);
    }

    &:hover:not(.zent-tabs-tab__actived) .zent-tabs-tab__actions {
      background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(240, 240, 240) 19%
      );
    }

    &-inner {
      min-width: 56px;
      line-height: 38px;
      text-align: center;
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }

    &: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;

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

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

// 按钮模式样式
.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 {
      min-width: 14px;
      line-height: 30px;
      padding: 0 20px;
    }

    &: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;
      }
    }
  }
}