@import '../../base.less';

@import './_var.less';

.@{tab-bar-cls} {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  background-color: @tab-bar-bg-color;
  box-sizing: border-box;

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

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

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

  &--round {
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 999px;
    box-shadow: @tab-bar-round-shadow;
  }

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

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