@layer components {
  .menu {
    --menu-width: 12rem;
    --menu-radius: var(--radius-md);
    --menu-shadow: var(--shadow-xl);
    --menu-bg: var(--color-white);
    --menu-z: 20;
    --menu-item-padding: 0.5rem 1rem;
    --menu-item-color: var(--color-gray-700);
    --menu-item-hover-bg: var(--color-blue-500);
    --menu-item-hover-color: var(--color-white);

    position: absolute;
    z-index: var(--menu-z);
    width: var(--menu-width);
    padding-block: 0.5rem;
    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--right { right: 0; }
  .menu--left { left: 0; }

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

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

  .menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--menu-item-padding);
    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__empty {
    display: block;
    padding: var(--menu-item-padding);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    text-decoration: none;

    &:hover {
      color: var(--color-gray-700);
    }
  }
}