@import '../../../styles/variables.scss';

.doctor-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: $tabbar-space;
  background: $card;
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 0 $bd, $shadow-md;
  z-index: 999;

  &__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    @include focus-ring;

    &--active {
      .doctor-tabbar__icon {
        transform: scale(1.15);
      }

      .doctor-tabbar__label {
        color: $doc-pri;
        font-weight: 600;
      }
    }
  }

  &__icon {
    font-size: 22px;
    line-height: 1;
    transition: transform 0.15s ease;
  }

  &__label {
    font-size: var(--tk-font-micro);
    color: $tx3;
    line-height: 1.2;
    transition: color 0.15s ease;
  }
}