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

  &__bar {
    position: relative;
    height: $tabs-tab-height;
    background-color: $white;
    border-bottom: $border-width-sm solid $gray-12;

    .#{$tabs-prefix-cls}-prevpage::before {
      @extend %text-mask;
      left: 0;
      width: 59px;
      background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    }

    .#{$tabs-prefix-cls}-nextpage::after {
      @extend %text-mask;
      right: 0;
      width: 59px;
      background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
    }

    .#{$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 {
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      height: $tabs-tab-height;
      padding: 0 .2rem;
      font-size: $tabs-tab-font-size;
      line-height: $tabs-tab-height;
      color: $gray-10;

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

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

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

    }
  }

  &__content {
    zoom: 1;

    .#{$tabs-prefix-cls}__tab-panel {
      overflow: auto;
    }

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