.menu {
  display: flex;
  flex-direction: column;
  padding: var(--size-1);
  row-gap: var(--size-1);
}

.menu__header {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  padding: var(--size-1_5) var(--size-2);
}

.menu__group {
  display: flex;
  flex-direction: column;
  row-gap: 1px;
}

.menu__separator {
  margin-inline: -0.25rem;
}

.menu__item {
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-font-weight: var(--font-normal);
  --btn-hover-color: var(--color-secondary);
  --btn-justify-content: start;
  --btn-outline-size: 0;
  --btn-padding: var(--size-1_5) var(--size-2);
  --btn-inline-size: var(--size-full);

  &:focus-visible {
    --btn-background: var(--color-secondary);
  }
}

.menu__item--negative {
  --btn-color: var(--color-negative);
  --btn-hover-color: var(--red-100);

  /* &:hover { */
  /*   --btn-color: var(--color-negative); */
  /*   --btn-background: var(--color-negative); */
  /* } */

  /* &:focus-visible { */
  /*   --btn-background: var(--color-negative); */
  /* } */
}

.menu__item-key {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  margin-inline-start: auto;
}