.#{$tabs-prefix-cls} {
  overflow: hidden;

  &__bar {
    position: relative;
    height: $tabs-tab-height;
    background-color: $white;
    //* NOTE: 不需要border */
    // border-bottom: $border-width-sm solid $gray-12;
    box-sizing: border-box;

    .#{$tabs-prefix-cls}-nav-swipe-container {
      width: 100%;

      .#{$tabs-prefix-cls}-nav-swipe {
        position: relative;
        left: 0;
        overflow: hidden;
        clear: both;
        
        .#{$tabs-prefix-cls}__tab {
          padding: 0 .2rem;
          float: left;
        }
      }
    }

    .#{$tabs-prefix-cls}-nav-container {
      display: flex;
    }

    .#{$tabs-prefix-cls}__tab {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: $tabs-tab-height;
      font-size: $tabs-tab-font-size;
      line-height: $tabs-tab-font-size;
      color: $gray-10;

      &--active {
        color: $brand-primary;
      }
    }

    &-line {
      position: absolute;
      bottom: 0;
      z-index: 2;
      height: 0.04rem;
      border-radius: 0.04rem;
      background-color: $brand-primary;

      &--animated {
        transition: transform $transition-time ease-in-out;
      }
    }
  }

  &__content {
    zoom: 1;

    // .#{$tabs-prefix-cls}__tab-panel {}

    &--animated {
      transition: transform $transition-time ease-in-out;
      will-change: transform;
      overflow: hidden;
      clear: both;

      .#{$tabs-prefix-cls}__tab-panel {
        float: left;
      }
    }

    &--no-animated {
      .#{$tabs-prefix-cls}__tab-panel {
        display: none;

        &--active {
          display: block;
        }
      }
    }
  }

  &--dark {
    .#{$tabs-prefix-cls}__bar {
      background: rgba(0, 0, 0, 0.8);
    }
    .#{$tabs-prefix-cls}__bar-line {
      background-color: #fff;
    }
    .#{$tabs-prefix-cls}__tab {
      color: #fff;
      &--active {
        color: #fff;
      }
    }
  }

  &--retro {
    .#{$tabs-prefix-cls}__bar-line {
      display: none;
    }
    .#{$tabs-prefix-cls}__tab {
      font-size: $tabs-tab-retro-font-size;
      color: $black;
      background-color: #E8ECEE;
      border-right: 1px solid $segment-line-color;
      &:last-child {
        border-right: none;
      }
      &--active {
        background-color: #fff;
        &::after{
          content: '';
          border-bottom: 0.04rem solid;
          width: 100%;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }

  &--anchor {
    .tabs__tab-panel {
      display: block
    }
    .tabs__content {
      height: 3rem;
      overflow-y: auto;
    }
  }
}