//
// Tabs
.#{$tabs-prefix-cls} {
  overflow: hidden;
  height: 100%;
  // tabs-list
  &-list {
    display: flex;
    box-shadow: 0 1px 0 0 $gray-light-9;

    &__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 40px;
      cursor: pointer;

      &.disabled {
        cursor: not-allowed;

        i {
          color: $gray-light-25;
        }
      }
    }

    &__content {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
    }

    &__nav {
      position: relative;
      display: inline-block;
      height: 40px;
      padding: 0;
      margin: 0;
      line-height: 40px;
      list-style: none;
      transition: transform .3s cubic-bezier(.645, .045, .355, 1);
    }

    .#{$tabs-prefix-cls}-tab {
      position: relative;
      display: inline-block;
      height: 100%;
      padding: 0 12px;
      margin: 0 24px 0 0;
      cursor: pointer;
      transition: color .3s cubic-bezier(.645, .045, .355, 1);

      &.checked {
        color: $brand-primary;
        border-bottom: 2px solid $brand-primary;
      }

      @include status-disabled {
        color: $gray-light-25;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    //more tabs
    &__more {
      justify-self: flex-end;

      .dropdown__toggle {
        height: $navs-tabs-height;
        font-size: 18px;
        line-height: $navs-tabs-height;

        &::after {
          content: "";
        }
      }

      .dropdown__menu {
        min-width: 100px;
        margin-top: 5px;
      }
    }
  }

  // tab-content
  // Hide tabbable panes to start, show them when `.active`
  &-content {
    > .#{$tabs-prefix-cls}-panel {
      height: 0;
      overflow: hidden;
    }

    > .active {
      height: auto;
    }
  }

  &-content--animated {
    display: flex;
    flex-direction: row;
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    > .#{$tabs-prefix-cls}-panel {
      height: auto;
      visibility: hidden;
      width: 100%;
      flex-shrink: 0;
    }
    > .active {
      visibility: visible;
    }
  }

  //
  // tabs--card
  //

  &--card {
    .#{$tabs-prefix-cls}-list {
      &__content {
        margin-bottom: -1px;
      }

      .#{$tabs-prefix-cls}-tab {
        padding: 0 12px;
        margin: 0 8px 0 0;
        font-size: 14px;
        background: $gray-light-4;
        border: 1px solid $gray-light-15;
        border-bottom: none;
        border-radius: 3px 3px 0 0;

        &.checked {
          background: $white;
          border-bottom-color: $white;
        }

        &:hover {
          color: $navs-light-horizontal-item-hover-color;
          background: $white;
          border-bottom: none;
        }

        @include status-disabled {
          color: $gray-light-25;
        }

        &[disabled]:hover {
          background: $gray-light-4;
        }
        &.checked[disabled]:hover {
          background: $white;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  //
  // tabs--center
  //


  &--center {
    .#{$tabs-prefix-cls}-list__content {
      text-align: center;
    }
  }

  //
  // tabs--vertical
  //
  &--vertical {
    display: flex;

    .#{$tabs-prefix-cls}-list {
      position: relative;
      flex-direction: column;
      width: 160px;
      height: 100%;
      overflow: hidden;
      box-shadow: inset -1px 0 0 0 $gray-light-9;

      &__btn {
        position: absolute;
        width: 100%;
        height: 32px;
        text-align: center;

        &--prev {
          top: 0;
        }

        &--next {
          bottom: 0;
        }
      }

      &__content {
        @extend %transparent-scroll;
        flex-flow: column;
        width: 100%;
        height: 100%;
        overflow: auto;
      }

      &__nav {
        width: 100%;
        height: auto;
        line-height: normal;
      }

      .#{$tabs-prefix-cls}-tab {
        @include text-truncate;
        display: block;
        width: 100%;
        height: $tabs-vertical-nav-tabs-height;
        padding: 0;
        line-height: $tabs-vertical-nav-tabs-height;
        text-align: center;
        border-right: $navs-tabs-link-border-width solid transparent;
        border-bottom: 0;

        &.checked {
          border-right-color: $brand-primary;
        }
      }
      // 遮罩
      &::after {
        position: absolute;
        right: 2px;
        bottom: 0;
        z-index: 2;
        display: block;
        width: 100%;
        height: $tabs-vertical-nav-tabs-height;
        pointer-events: none;
        content: "";
        // background: linear-gradient(to bottom, rgba(248, 249, 250, 0), rgba(255, 255, 255, 1));
      }

      &.scrollY {
        padding: 32px 0;
      }
    }

    .#{$tabs-prefix-cls}-content {
      flex: 1;
    }

    .#{$tabs-prefix-cls}-content--animated {
      display: flex;
      flex-direction: column;
      will-change: transform;
      transition: transform 0.3s ease-in-out;
      > .#{$tabs-prefix-cls}-panel {
        height: 100%;
        visibility: hidden;
        width: auto;
        flex-shrink: 0;
      }
      > .active {
        visibility: visible;
      }
    }

    &.tabs--sm {
      .tabs-tab {
        height: $tabs-vertical-sm-nav-tabs-height;
        font-size: $font-size-xs;
        line-height: 32px;
      }
    }
  }

  //
  // text align way
  //

  // text right
  .tabs--text-right {
    .tabs-tab {
      text-align: right;
    }
  }
}