/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
wcs-select-option {
  --wcs-select-option-height: var(--wcs-semantic-size-m);
  --wcs-select-option-padding-horizontal: var(--wcs-semantic-spacing-base);
  --wcs-select-option-padding-vertical: 0;
  --wcs-select-option-text-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-select-option-text-font-size: var(--wcs-semantic-font-size-base);
  --wcs-select-option-text-color-default: var(--wcs-semantic-color-text-primary);
  --wcs-select-option-text-color-focus: var(--wcs-semantic-color-text-primary);
  --wcs-select-option-text-color-hover: var(--wcs-semantic-color-text-primary);
  --wcs-select-option-text-color-selected: var(--wcs-semantic-color-text-primary);
  --wcs-select-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);
  --wcs-select-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);
  --wcs-select-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);
  --wcs-select-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);
  --wcs-select-option-background-color-selected: var(--wcs-semantic-color-background-action-secondary-selected-default);
  --wcs-select-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-secondary-selected-hover);
  --wcs-select-option-background-color-selected-press: var(--wcs-semantic-color-background-action-secondary-selected-press);
  --wcs-select-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-secondary-selected-disabled);
  --wcs-select-option-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);
  --wcs-select-option-border-style-focus: var(--wcs-semantic-border-style-focus-base);
  --wcs-select-option-border-color-focus: var(--wcs-semantic-color-border-focus-base);
  --wcs-select-option-border-width-focus: var(--wcs-semantic-border-width-large);
  --wcs-select-option-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-select-option-checkbox-color: var(--wcs-semantic-color-background-control-indicator-selected);
  --wcs-select-option-gap: var(--wcs-semantic-spacing-base);
  --wcs-select-option-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wcs-select-option-gap);
  padding: var(--wcs-select-option-padding-vertical) var(--wcs-select-option-padding-horizontal);
  height: var(--wcs-select-option-height);
  cursor: pointer;
  user-select: none;
  font-weight: var(--wcs-select-option-text-font-weight);
  font-size: var(--wcs-select-option-text-font-size);
  color: var(--wcs-select-option-text-color-default);
  background-color: var(--wcs-select-option-background-color-default);
  transition-duration: var(--wcs-select-option-transition-duration);
  transition-property: background-color, color;
  transition-timing-function: ease;
  border-radius: var(--wcs-select-option-border-radius);
  overflow: hidden;
  white-space: nowrap;
}
wcs-select-option:focus-visible {
  outline: var(--wcs-select-option-border-style-focus) var(--wcs-select-option-border-width-focus) var(--wcs-select-option-border-color-focus);
  outline-offset: calc(-1 * var(--wcs-select-option-border-width-focus));
}
wcs-select-option:focus {
  color: var(--wcs-select-option-text-color-focus);
  background-color: var(--wcs-select-option-background-color-focus);
}
wcs-select-option:hover {
  color: var(--wcs-select-option-text-color-hover);
  background-color: var(--wcs-select-option-background-color-hover);
}
wcs-select-option:active {
  background-color: var(--wcs-select-option-background-color-press);
}

wcs-select-option[disabled] {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--wcs-select-option-text-color-disabled);
}

wcs-select-option[hidden] {
  display: none;
}

wcs-select-option[selected] {
  color: var(--wcs-select-option-text-color-selected);
  background-color: var(--wcs-select-option-background-color-selected);
}
wcs-select-option[selected]:hover {
  background-color: var(--wcs-select-option-background-color-selected-hover);
}
wcs-select-option[selected]:active {
  background-color: var(--wcs-select-option-background-color-selected-press);
}

wcs-select-option[selected][disabled] {
  color: var(--wcs-select-option-text-color-disabled);
  background-color: var(--wcs-select-option-background-color-selected-disabled);
}

wcs-select-option[multiple] wcs-checkbox {
  pointer-events: none;
}
wcs-select-option[multiple]:hover wcs-checkbox {
  --wcs-checkbox-border-color: var(--wcs-select-option-checkbox-color);
}

wcs-select-option[highlighted] {
  outline: var(--wcs-select-option-border-style-focus) var(--wcs-select-option-border-width-focus) var(--wcs-select-option-border-color-focus);
  outline-offset: calc(-1 * var(--wcs-select-option-border-width-focus));
}
wcs-select-option[highlighted] wcs-checkbox {
  --wcs-checkbox-border-color: var(--wcs-select-option-checkbox-color);
}