@import './var.less';

.@{prefix}-tabbar {
  overflow: hidden;
  background-color: var(--background-white);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  &__list {
    display: flex;
    padding: 0;
    margin: 7px 0;
    list-style: none;
  }

  &-item {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
  }

  &-item.on {
    color: var(--brand-standard);
  }

  &-item__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
  }

  &-item__icon {
    position: relative;

    img {
      max-width: 29px;
      max-height: 29px;
    }

    .@{prefix}-badge {
      position: absolute;
      top: -2px;
      right: 2px;
      transform: translateX(5px);
    }

    .@{prefix}-badge_capsule {
      transform: translateX(85%);
    }
  }
}