@layer components {
  .glass-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: fixed;
    bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) + 1rem);
    left: 50%;
    translate: -50% 0;
    padding: 0.25rem;
    border-radius: 99rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(16px);
    background: oklch(var(--lch-canvas) / 0.25);
    border: 1px solid oklch(var(--lch-canvas) / 0.5);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-bar);

    @media (min-width: 640px) {
      bottom: 2rem;
    }
  }

  .glass-menu__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    border: none;
    background: none;
    border-radius: 99rem;
    color: var(--color-ink);

    @media (any-hover: hover) {
      &:hover {
        background: oklch(var(--lch-ink-darkest) / 0.08);
      }
    }

    .icon {
      block-size: 1.25rem;
      inline-size: 1.25rem;
    }
  }
}