@include b(tab-bar) {
  @include define(font-size, 12px);
  @include define(background, #fff);
  @include define(height, 50px);
  @include define(color, var(--za-color-text));
  @include define(active-color, var(--za-theme-primary));

  background: var(--background);

  @include e(wrapper) {
    min-height: var(--height);
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    display: flex;
  }

  @include e(item) {
    flex: 1;

    @include e(title) {
      font-size: var(--font-size);
      line-height: 1;
      margin-top: 2px;
      color: var(--color);
    }

    @include e(icon) {
      display: inline-block;
      vertical-align: middle;
      width: 24px;
      height: 24px;
      font-size: 18px;
    }

    @include b(badge) {
      @include e(content) {
        --top: 6px;
      }
    }

    @include m(active) {
      @include b(tab-bar) {
        @include e(title) {
          color: var(--active-color);
        }
      }

      @include b(icon) {
        color: var(--active-color);
      }
    }
  }
}