@import '../common/index.less';

@tab-bar-cls: ~'@{prefix}-tab-bar';
@tab-bar-border-color: @border-level-1-color;

page {
  --t-tab-bar-border-color: @tab-bar-border-color;
}

.@{tab-bar-cls} {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  font-size: 16px;

  &--border::before {
    z-index: 1;
    .hairline-top(@color: var(--t-tab-bar-border-color));
  }

  &--fixed {
    position: fixed;
    left: 0;
    bottom: 0;
  }

  &--safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}