: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:where([role]),
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;
  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(--_aura-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);
      }
    }
  }

  &:not([disabled], [aria-disabled='true']):active {
    background: var(--_aura-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);
    }
  }

  &[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));
    }
  }
}

@media (any-hover: hover) {
  vaadin-select[theme~='filled'] > [slot='overlay'] [role='option']:not([disabled], [aria-disabled='true']):hover {
    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);
  }
}

vaadin-select[theme~='filled'] > [slot='overlay'] [role='option']:not([disabled], [aria-disabled='true']):active {
  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);
}

/* 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);
}