.#{$tab-bar-prefix-cls} {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $tabs-pagination-zindex;
  display: flex;
  width: 100%;
  height: $tab-bar-height;
  background: $white;
  border-top: $border-width-sm solid $gray-12;
  transition: bottom $transition-time;

  &--hidden {
    bottom: -$tab-bar-height;
  }

  .#{$tab-bar-prefix-cls}__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    &-title {
      margin-top: $tab-bar-tab-title-margin-top;
      font-size: $tab-bar-tab-title-font-size;
      color: $gray-10;
    }

    &-icon {
      display: flex;
      justify-content: center;
      font-size: $tab-bar-tab-icon-font-size;
      line-height: 1;
      color: $gray-8;
    }

    &--active{
      .#{$tab-bar-prefix-cls}__item-title,
      .#{$tab-bar-prefix-cls}__item-icon {
        color: $brand-primary;
      }
    }
  }
}
