:where(:root),
:where(:host) {
  --aura-item-overlay-padding-inline: var(--vaadin-padding-xs);
  --aura-item-overlay-padding-block: var(--vaadin-padding-xs);
  --vaadin-item-overlay-padding: var(--aura-item-overlay-padding-block) var(--aura-item-overlay-padding-inline);
  --vaadin-item-border-radius: clamp(
    0px,
    var(--aura-item-overlay-padding-inline) * 100,
    var(--vaadin-radius-m) - min(var(--aura-item-overlay-padding-inline), var(--aura-item-overlay-padding-block))
  );
  --vaadin-item-gap: var(--vaadin-gap-s);
}

vaadin-avatar-group-menu-item,
vaadin-combo-box-item,
vaadin-context-menu-item,
vaadin-time-picker-item,
vaadin-item,
vaadin-menu-bar-item,
vaadin-multi-select-combo-box-item,
vaadin-select-item:where([role]) {
  font-weight: var(--aura-font-weight-medium);
  -webkit-user-select: none;
  user-select: none;
  --_highlight-color: light-dark(
    oklch(from var(--aura-accent-color-light) min(0.9, l) c h / max(0.05, l / 4)),
    oklch(from var(--aura-accent-color-dark) max(0.6, l) c h / max(0.2, l / 4))
  );
  padding-inline-start: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));
  gap: 0;

  &::part(checkmark) {
    color: var(--vaadin-item-checkmark-color, var(--aura-accent-text-color));
    --vaadin-icon-visual-size: 75%;
  }

  &[aria-haspopup='true'] {
    padding-inline-end: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));

    &::after {
      --vaadin-icon-visual-size: 90%;
    }
  }

  &::part(content) {
    padding-inline: var(--vaadin-gap-xs);
    gap: var(--vaadin-item-gap);
  }

  @media (any-hover: hover) {
    &:not([disabled], [aria-disabled='true']):hover {
      background: var(--_highlight-color);

      &[theme~='filled'] {
        background: var(--aura-accent-color);
        color: var(--aura-accent-contrast-color);
        --vaadin-text-color: var(--aura-accent-contrast-color);
        --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
        --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
        --vaadin-icon-color: var(--aura-accent-contrast-color);
        --vaadin-item-checkmark-color: var(--aura-accent-contrast-color);
      }
    }
  }

  &:active {
    background: var(--_highlight-color);
  }

  &[aria-expanded='true']:not(:hover) {
    background: var(--vaadin-background-container-strong);
  }

  &:where(
    [theme~='danger'],
    .aura-accent-color,
    .aura-accent-red,
    .aura-accent-orange,
    .aura-accent-yellow,
    .aura-accent-green,
    .aura-accent-blue,
    .aura-accent-purple,
    .v-info,
    .v-success,
    .v-warning,
    .v-error
  ) {
    color: var(--aura-accent-text-color);

    > * {
      --aura-accent-color-light: var(--aura-accent-color-light-initial);
      --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
      --aura-accent-color: light-dark(var(--aura-accent-color-light-initial), var(--aura-accent-color-dark-initial));
    }
  }
}

/* TODO is there a better selector? */
[role='menu'] [role='separator'] {
  margin-block: var(--vaadin-gap-xs);
  margin-inline: calc(var(--vaadin-gap-xs) + var(--vaadin-padding-inline-container));
  border-color: var(--vaadin-border-color);
}
