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

.select-option {
  display: flex;
  align-items: center;
  gap: var(--nds-spacing-xs);
  padding: var(--nds-spacing-xs) var(--nds-spacing-sm);
  cursor: pointer;
  border-radius: var(--nds-radius-sm);
  @include text-base;
  color: var(--nds-text);
  transition: background-color 110ms ease;

  &:hover {
    background-color: var(--nds-surface-hover);
  }
  &[aria-selected="true"] {
    color: var(--nds-primary);
    font-weight: 600;
  }
  &__disabled {
    color: var(--nds-disabled);
    cursor: not-allowed;
    &:hover {
      background: transparent;
    }
  }
}