.container {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.row {
  display: block;
}

/* Applied to actual interactive elements (button/a/custom that forwards className) */
.interactive {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xs);
  inline-size: 100%;
  text-align: start;
  text-decoration: none;
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-md);
  min-block-size: var(--component-size-sm);
  background: transparent;
  border: none;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-fg-default);
  cursor: pointer;
  border-radius: var(--border-radius-md);
  transition:
    background-color var(--transition-fast) var(--ease-standard),
    color var(--transition-fast) var(--ease-standard);
}

/* Default case: applies wrap-safety to whichever element ends up last,
   e.g. a plain label with no `endAdornment` prop involved — covers most
   Menu.Item usage as-is. Excluded once .endAdornment is present (it's then
   always the true last child) — wrap the label in <Menu.Label> in that case,
   since it's no longer last and needs the wrap styling explicitly. */
.interactive > :last-child:not(.endAdornment) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Explicit label slot (use <Menu.Label>) so wrap styling doesn't depend on
   the label being the last child — needed once trailing content (the
   `endAdornment` prop) is rendered after it. */
.label {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Trailing content rendered via the `endAdornment` prop (e.g. a status
   dot/badge). Centered on its own regardless of the row's flex-start
   alignment, since it isn't tied to the first text line the way a leading
   icon is. */
.endAdornment {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
}

/* Wraps a bare <Switch noContainer> in Menu.SwitchItem so it docks at the
   end of the row (label/endAdornment are rendered by Menu, not Switch).
   Shrink-proof: Switch's own `.container` still matches the generic
   `.row :global(.container)` full-width rule below, but that now resolves
   against this wrapper's own content width, not the whole row. */
.switchControl {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/*
  Applied to the immediate child of <li> even if it's NOT an interactive element (e.g. a <div>)
  so that menu row styling still works for components that render a wrapper.
*/
.interactiveChild {
  display: block;
  inline-size: 100%;
  border-radius: var(--border-radius-md);
}

/* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
.row > .interactiveChild {
  display: flex;
  align-items: center;
  inline-size: 100%;
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-md);
  min-block-size: var(--component-size-sm);
  border-radius: var(--border-radius-md);
  cursor: pointer;
}

/* NEW: add consistent gap between control and label inside Checkbox/Radio
   Both components use a root element with className={styles.container}.
   Because they're CSS modules, we must target it with :global(.container). */
.row :global(.container) {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  inline-size: 100%;
  cursor: pointer;
}

.row :global(.label) {
  flex: 1 1 auto;
  cursor: pointer;
}

.row :global(.label) * {
  cursor: pointer;
}

/* Hover: support both cases (interactive element, or wrapper child) */
.interactive:hover:not(.selected),
.row:hover > .interactiveChild:not(.selected) {
  background-color: var(--color-bg-toolbar-hover);
}

/* The row already conveys hover via the background color above, covering
   the whole item consistently. Suppress RadioButton's own icon hover
   border here — otherwise it only lights up when the pointer happens to
   be over the icon/label/endAdornment rather than anywhere in the row.
   RadioButton's hashed class names can't be targeted directly from this
   module, so this relies on a CSS custom property that RadioButton's own
   hover rule reads — custom properties inherit through the DOM regardless
   of CSS-module class hashing. */
.row:hover > .interactiveChild {
  --radio-hover-border-color: var(--color-border-default);
}

/* Focus ring: support both cases */
.interactive:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-border-selected);
}

/* If wrapper contains a focusable element, show ring when any child is focused */
.row:focus-within > .interactiveChild {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-border-selected);
}

/* Keyboard active/current item */
.active,
.interactive.active,
.row > .interactiveChild.active {
  background-color: var(--color-bg-toolbar-hover);
}

/* Selected item */
.selected,
.interactive[aria-selected='true'],
.row > .interactiveChild.selected,
.row > .interactiveChild[aria-selected='true'] {
  background-color: var(--color-bg-selected);
  color: var(--color-fg-default);
}

.selected:hover,
.interactive.selected:hover,
.interactive[aria-selected='true']:hover,
.row:hover > .interactiveChild.selected,
.row:hover > .interactiveChild[aria-selected='true'],
.active.selected,
.interactive.active.selected,
.interactive.active[aria-selected='true'],
.row > .interactiveChild.active.selected,
.row > .interactiveChild.active[aria-selected='true'] {
  background-color: var(--color-bg-selected-hover);
}

/* Checked (legacy support; kept in case any interactive element still uses aria-checked) */
.interactive[aria-checked='true'],
.row > .interactiveChild[aria-checked='true'] {
  background-color: var(--color-bg-selected);
  color: var(--color-fg-default);
}

.itemDanger {
  color: var(--color-status-error);
}

.itemDanger svg {
  color: inherit;
}

/* Disabled: support both cases */
.interactive[aria-disabled='true'],
.interactive:disabled,
.row > .interactiveChild[aria-disabled='true'] {
  color: var(--color-disabled-fg);
  cursor: not-allowed;
  pointer-events: none;
}

/* Icons inside either interactive element or wrapper */
.interactive svg,
.interactiveChild svg {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
  /* Vertically center the icon against the first text line when parent is flex-start */
  margin-block: calc((var(--line-height-normal) * var(--font-size-sm) - var(--icon-size-sm)) / 2);
  flex-shrink: 0;
}

/* Visual separator row (used by <Menu.Separator />) */
.separator {
  block-size: 1px;
  margin-block: var(--spacing-xxs);
  background: var(--color-border-subtle);
  opacity: 0.8;
  border-radius: 999px;
}

.header {
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-md);
  color: var(--color-fg-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: default;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.header svg {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
  color: inherit;
}

.description {
  padding-block: var(--spacing-xxs);
  padding-inline: var(--spacing-md);
  color: var(--color-fg-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: var(--line-height-normal);
  text-transform: none;
  letter-spacing: normal;
  cursor: default;
  user-select: text;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Gap between items */
.gap {
  gap: var(--spacing-xs);
}

/* Bordered item variant */
.rowBordered {
  border: 1px solid var(--color-border-default);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

/* Inside a bordered row, remove inner border-radius so hover bg fills the full area */
.rowBordered .interactive,
.rowBordered .interactiveChild {
  border-radius: 0;
}