@layer components {
  .rs-menu {
    display: flex;
    flex-direction: column;
    gap: var(--rs-unit-x1);
    margin: 0;
    padding: var(--rs-unit-x1);
    list-style: none;
  }

  .rs-menu-item {
    --rs-menu-item-bg: transparent;
    --rs-menu-item-fg: var(--rs-color-foreground-neutral);
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-unit-x3);
    inline-size: 100%;
    border: 0;
    border-radius: var(--rs-radius-small);
    padding: var(--rs-unit-x2) var(--rs-unit-x3);
    background: var(--rs-menu-item-bg);
    color: var(--rs-menu-item-fg);
    cursor: pointer;
    font-weight: var(--rs-font-weight-medium);
    text-align: start;
    text-decoration: none;
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      color var(--rs-duration-fast) var(--rs-easing-standard);
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-menu-item:hover:not([aria-disabled="true"]) {
      --rs-menu-item-bg: color-mix(
        in oklch,
        var(--rs-color-background-neutral),
        transparent 68%
      );
    }
  }

  .rs-menu-item[aria-current="page"],
  .rs-menu-item[aria-selected="true"] {
    --rs-menu-item-bg: color-mix(
      in oklch,
      var(--rs-color-background-primary),
      transparent 88%
    );
    --rs-menu-item-fg: var(--rs-color-foreground-primary);
  }

  .rs-menu-item[data-tone="critical"] {
    --rs-menu-item-fg: var(--rs-color-foreground-critical);
  }

  .rs-menu-item[aria-disabled="true"] {
    --rs-menu-item-fg: var(--rs-color-foreground-disabled);
    cursor: not-allowed;
  }
}