@import 'part:@lyra/base/theme/variables-style';

.item {
  background-color: var(--selectable-item-color);
  color: var(--selectable-item-text-color);
  cursor: default;
  transition: background-color 0.1s linear;

  @nest &:hover {
    transition: background-color 0.1s linear;

    @media (--screen-medium) {
      background-color: var(--selectable-item-color-hover);
      color: var(--selectable-item-color-hover--inverted);
    }
  }

  @nest &:focus {
    outline: none;

    @media (--screen-medium) {
      background-color: var(--selectable-item-color-focus);
      color: var(--selectable-item-color-focus--inverted);
    }
  }

  @nest &:active {
    background-color: var(--selectable-item-color-active);
  }
}

.selected {
  background-color: var(--selected-item-color);
  color: var(--selected-item-color--inverted);
}

.highlighted {
  background-color: var(--selectable-item-color-highlighted);

  @nest &.selected {
    background-color: var(--selectable-item-color-highlighted);
  }
}