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

  &__bar {
    position: relative;
    height: $tabs-tab-height;
    background-color: #E8ECEE;
    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 $tabs-tab-font-size;
      }
    }

    .#{$tabs-prefix-cls}__tab {
      float: left;
      border: 1px solid #CFD9DF;
      border-top: none;
      border-bottom: none;
      font-size: $tabs-tab-font-size;
      line-height: $tabs-tab-height;
      color: black;
      text-align: center;

      &--active {
        background-color: $white;
        border-color: $white;
        border-bottom: 0.04rem solid black;
      }
    }

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

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

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

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