@layer components {
  .menu {
    --menu-width: 12rem;
    --menu-radius: var(--radius-lg);
    --menu-shadow: var(--bevel-popover);
    --menu-bg: var(--color-white);
    --menu-z: 20;
    --menu-item-padding: 0.5rem 0.75rem;
    --menu-item-color: var(--color-gray-700);
    --menu-item-hover-bg: var(--color-gray-100);
    --menu-item-hover-color: var(--color-gray-900);

    position: absolute;
    z-index: var(--menu-z);
    width: var(--menu-width);
    padding: 0.25rem;
    border-radius: var(--menu-radius);
    background-color: var(--menu-bg);
    box-shadow: var(--menu-shadow);

    opacity: 0;
    scale: 95%;
    transition: all 0.2s var(--default-transition-timing-function);
  }

  .menu[popover] {
    position: fixed;
    inset: auto;
    margin-block: 0.25rem;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

    transition: none;

    &:popover-open {
      opacity: 1;
      scale: 100%;
    }
  }

  .menu--raised {
    --menu-z: 50;
    --menu-item-hover-bg: var(--color-indigo-50);
    --menu-item-hover-color: var(--color-indigo-700);
  }

  .menu--right { right: 0; }
  .menu--left { left: 0; }

  .menu--block {
    left: 0;
    right: 0;
    width: auto;
  }

  .menu--down { top: calc(100% + 0.5rem); }

  .menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: var(--menu-item-padding);
    border-radius: var(--radius-md);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--menu-item-color);
    text-decoration: none;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--menu-item-hover-bg);
        color: var(--menu-item-hover-color);
      }
    }
  }

  .menu__separator {
    border-top: 1px solid var(--color-gray-100);
    margin-block: 0.25rem;
  }

  .menu__icon {
    width: 1rem;
    height: 1rem;
  }

  .menu__icon--muted { color: var(--color-gray-600); }

  .menu__item--danger {
    --menu-item-color: var(--color-red-600);
    --menu-item-hover-bg: var(--color-red-50);
    --menu-item-hover-color: var(--color-red-700);
  }
}