/* Component tokens that resolve differently in the odeditor theme,
   re-emitted with the odeditor resolution as the middle fallback. Every
   base rule touching a themed property on the same element repeats here
   in base order, so the theme layer keeps the base cascade winners. */
$option-font-size: var(--wds-input-value-font-size-medium, var(--wds-font-size-body-small, 16px));
$option-line-height: var(--wds-input-value-font-line-height-medium, var(--wds-font-line-height-body-small, 24px));
$option-title: var(--wds-list-item-select-title, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
$option-title-disabled: var(--wds-list-item-select-title-disabled, var(--wds-color-text-disabled, var(--wsr-color-D50, #ACAFC4)));
$option-active-title: var(--wds-list-item-select-active-title, var(--wds-color-text-standard-primary, var(--wsr-color-D80, #FFFFFF)));
$option-fill-hover: var(--wds-list-item-select-fill-hover, var(--wds-color-fill-dark-secondary, var(--wsr-color-B50, #E7F0FF)));
$option-active-fill: var(--wds-list-item-select-active-fill, var(--wds-color-black-600, var(--wsr-color-B10, #116DFF)));
$option-active-fill-hover: var(--wds-list-item-select-active-fill-hover, var(--wds-color-fill-dark-secondary, var(--wsr-color-B20, #5999FF)));
$option-padding-vertical: var(--wds-list-item-select-padding-vertical-medium, var(--wds-space-200, 6px));
$option-padding-right: var(--wds-list-item-select-padding-horizontal-medium, var(--wds-space-200, 20px));
$option-padding-left: var(--wds-list-item-select-padding-horizontal-medium, var(--wds-space-200, 24px));
$option-height-small: var(--wds-dropdown-layout-option-size-small, var(--wds-space-800, 36px));
$option-height-big: var(--wds-dropdown-layout-option-size-big, var(--wds-space-1000, 47px));

.dropdown-layout {
  & &__option {
    font-size: $option-font-size;
    line-height: $option-line-height;
    color: $option-title;
    padding: $option-padding-vertical $option-padding-right $option-padding-vertical $option-padding-left;
  }

  & &__option--override-style {
    padding: 0;
  }

  & &__option--disabled {
    color: $option-title-disabled;
  }

  & &__option--hovered {
    background: $option-fill-hover;
    color: $option-title;
  }

  & &__option--selected {
    background-color: $option-active-fill;
    color: $option-active-title;
  }

  & &__option--selected#{&}__option--hovered {
    background-color: $option-active-fill-hover;
    color: $option-active-title;
  }

  & &__selectable-option--item-height-small {
    min-height: $option-height-small;
  }

  & &__selectable-option--item-height-big {
    min-height: $option-height-big;
  }
}