@use '../../styles/tokens/typography' as *;

.select-option {
  padding: var(--nds-spacing-xs) var(--nds-spacing-md);
  cursor: pointer;
  color: var(--nds-text);
  background-color: var(--nds-neutral);
  transition: background-color 0.15s ease;

  &:hover:not(.select-option__disabled) {
    background-color: var(--nds-secondary);
  }

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

  &__selected {
    background-color: var(--nds-primary);
    color: var(--nds-text);

    &:hover {
      background-color: color-mix(in srgb, var(--nds-primary) 85%, var(--nds-background));
    }
  }

  &__disabled {
    background-color: var(--nds-disabled);
    color: color-mix(in srgb, var(--nds-text) 40%, transparent);
    cursor: not-allowed;
  }
}