@use '~@moda/om';

.SelectOption {
  @include om.text(body1);

  display: block;
  width: 100%;
  text-align: left;
  padding: om.spacing(2, 3);
  color: om.color(ink);

  &--selected {
    text-decoration: underline;
  }

  &:hover,
  &--active {
    background-color: om.color(noise);
  }

  &--disabled {
    color: om.color(fog);
    cursor: default;

    &:hover {
      background-color: om.color('snow');
    }
  }

  &__color-swatch {
    border-color: om.color(ink);
    border-style: solid;
    border-radius: 50%;
    border-width: 1px;
    display: inline-block;
    margin-left: om.space(1);
    margin-right: om.space(1);
    height: om.space(4);
    transform: translateY(25%);
    width: om.space(4);
  }
}