@layer repui.components {
  .rui-menu {
    display: flex;
    flex-direction: column;
    gap: var(--rui-menu-gap);
    padding: var(--rui-menu-padding);
    border: var(--rui-menu-border);
    border-radius: var(--rui-menu-radius);
    background: var(--rui-menu-background);
    box-shadow: var(--rui-menu-shadow);
    color: var(--rui-color-text);
    font-family: var(--rui-font-family);
    font-size: var(--rui-text-body-size);
    line-height: var(--rui-text-body-line-height);
  }

  .rui-menu[data-orientation="horizontal"] {
    flex-direction: row;
  }

  .rui-menu-item {
    border: 0;
    border-radius: var(--rui-menu-item-radius);
    padding: var(--rui-menu-item-padding);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .rui-menu-item:hover:not(:disabled) {
    background: var(--rui-menu-item-active-background);
  }

  .rui-menu-item:focus-visible {
    outline: var(--rui-focus-width) solid var(--rui-focus-color);
    outline-offset: -2px;
  }

  .rui-menu-item:disabled {
    cursor: not-allowed;
  }
}