@layer components {
  .bar {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: oklch(var(--lch-canvas) / 0.85);
    block-size: calc(var(--footer-height) + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--color-ink-lighter);
    display: flex;
    inset: auto 0 0 0;
    justify-content: center;
    padding-block: var(--block-space) calc(var(--block-space-half) + env(safe-area-inset-bottom));
    padding-inline: var(--main-padding);
    position: fixed;
    z-index: var(--z-bar);

    &::before {
      background: linear-gradient(to top, oklch(var(--lch-ink-darkest) / 0.1), transparent);
      block-size: 4px;
      content: "";
      inset-block-start: 0;
      inset-inline: 0;
      pointer-events: none;
      position: absolute;
      translate: 0 -100%;
    }
  }

  .bar__nav {
    display: flex;
    gap: var(--inline-space);
    inline-size: 100%;
    justify-content: center;
    max-inline-size: var(--container-width, 40rem);
  }

  .bar__item {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-ink);
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: var(--text-x-small);
    gap: 0.25em;
    justify-content: center;
    padding: 0.5em;
    text-decoration: none;
    transition: opacity 100ms ease-out;

    &:hover {
      opacity: 0.7;
    }
  }

  .bar__icon {
    font-size: 1.25rem;
    line-height: 1;
  }

  .bar__label {
    font-weight: 500;

    @media (max-width: 639px) {
      display: none;
    }
  }

  .bar__item--disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }
}