@layer components {
  .menu {
    position: relative;
  }

  .menu__trigger {
    align-items: baseline;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    gap: var(--inline-space-half, 4px);
    padding: 0;

    > .icon {
      color: var(--color-accent);
      transform: rotate(-2deg);
      translate: 0 3px;
    }

    kbd {
      font-size: var(--text-smallest);
      margin: 0 var(--inline-space-half);
      opacity: 0.5;
      transform: rotate(-2deg);
      translate: 0 -4px;
    }
  }

  .menu__dialog {
    background-color: var(--color-canvas);
    border: 1px solid color-mix(in oklch, var(--color-accent), black 15%);
    border-radius: 4px;
    box-shadow: 0 1px 3px oklch(from var(--color-accent) l c h / 0.15), 0 4px 12px oklch(from var(--color-accent) l c h / 0.12), 0 8px 24px oklch(from var(--color-accent) l c h / 0.08);
    left: 50%;
    margin: 0;
    opacity: 0;
    padding: var(--block-space-half);
    position: absolute;
    transition-behavior: allow-discrete;
    transition-duration: 100ms;
    transition-property: display, opacity;
    transition-timing-function: ease-out;
    translate: -50% 0;
    width: min(375px, calc(100vw - var(--block-space)));
    z-index: var(--z-menu);

    &[open] {
      opacity: 1;
      transition-duration: 150ms;
    }

    @starting-style {
      &[open] {
        opacity: 0;
      }
    }

    &::backdrop {
      background: none;
    }
  }

  .menu__list {
    list-style: none;
    margin: 0;
    padding: 0;

    & + & {
      border-top: 1px solid var(--color-concrete);
      margin-top: var(--block-space-half);
      padding-top: var(--block-space-half);
    }
  }

  .menu__item a {
    align-items: center;
    border-radius: 4px;
    color: var(--color-ink);
    display: flex;
    font-size: var(--text-small);
    font-weight: 600;
    gap: var(--inline-space);
    line-height: var(--line-height-small);
    padding: var(--block-space-half) calc(var(--block-space) * 1.25);
    position: relative;
    text-decoration: none;

    &:hover {
      background-color: color-mix(in oklch, var(--color-canvas), black 5%);
    }

    kbd {
      inset: 0.66em 0.33em auto auto;
      opacity: 0.5;
      position: absolute;

      @media (any-hover: none) {
        display: none;
      }
    }
  }
}