:host {
  --background-color-current: var(--wa-color-brand-fill-loud);
  --background-color-hover: var(--wa-color-neutral-fill-normal);
  --label-color-current: var(--wa-color-brand-on-loud);
  --label-color-hover: var(--wa-color-neutral-on-normal);

  display: block;
  color: var(--wa-color-text-normal);
  -webkit-user-select: none;
  user-select: none;
}

:host(:focus) {
  outline: none;
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  font: inherit;
  padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
  line-height: var(--wa-line-height-condensed);
  transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
  cursor: pointer;
}

.option--hover:not(.option--current):not(.option--disabled) {
  background-color: var(--background-color-hover);
  color: var(--label-color-hover);
}

.option--current,
.option--current.option--disabled {
  background-color: var(--background-color-current);
  color: var(--label-color-current);
  opacity: 1;
}

.option--disabled {
  outline: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.option__label {
  flex: 1 1 auto;
  display: inline-block;
}

.option .option__check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875em;
  visibility: hidden;
  width: var(--wa-space-xl);
}

.option--selected .option__check {
  visibility: visible;
}

.option__prefix,
.option__suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.option__prefix::slotted(*) {
  margin-inline-end: var(--wa-space-xs);
}

.option__suffix::slotted(*) {
  margin-inline-start: var(--wa-space-xs);
}

@media (forced-colors: active) {
  :host(:hover:not([aria-disabled='true'])) .option {
    outline: dashed 1px SelectedItem;
    outline-offset: -1px;
  }
}
