/* =========================
   Bottom Bar
   Figma: Bottom Bar Container.
   Floating pill nav for primary app sections.
========================= */

@use "../kit-deps" as *;

.bottom-bar {
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: $space-1;
  border-radius: $radius-full;
  background-color: $neutral-0;
  box-shadow:
    0 4px 24px rgba($neutral-900, 0.08),
    0 1px 2px rgba($neutral-900, 0.04),
    inset 0 0 0 1px rgba($neutral-900, 0.04);

  &--stacked {
    gap: $space-1;
  }

  &--inline {
    gap: $space-1;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  &__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: $space-1;
    padding: $space-2 $space-4;
    border: 0;
    border-radius: $radius-full;
    background-color: transparent;
    color: $neutral-500;
    font-family: inherit;
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    line-height: $line-height-tight;
    text-decoration: none;
    cursor: pointer;
    transition:
      color $motion-base $motion-ease,
      background-color $motion-base $motion-ease,
      box-shadow $motion-base $motion-ease;

    &:focus-visible {
      @include focus_ring;
      outline-offset: 2px;
    }

    &:hover:not(.is-active) {
      color: $neutral-700;
    }

    .bottom-bar--stacked & {
      flex-direction: column;
      min-width: 64px;
      padding: $space-2 $space-3;
    }

    .bottom-bar--inline &.is-active,
    .bottom-bar--inline &:active {
      background-color: $neutral-0;
      color: $color-secondary;
      box-shadow:
        0 4px 24px rgba($neutral-900, 0.08),
        0 1px 2px rgba($neutral-900, 0.04),
        inset 0 0 0 1px rgba($neutral-900, 0.04);
    }

    &.is-active {
      color: $color-secondary;

      .bottom-bar--stacked & {
        background-color: transparent;
        box-shadow: none;
      }
    }
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: $icon-size-md;
    height: $icon-size-md;
    flex-shrink: 0;
    color: currentColor;

    svg {
      width: 100%;
      height: 100%;
      fill: currentColor;
    }
  }

  &__label {
    white-space: nowrap;
  }
}