@import '../../../../styles/common';

$min-height: control-height();
$control-size: rem(16px);

.Option {
  @include unstyled-button;
  @include unstyled-link;
  width: 100%;
  min-height: $min-height;
  text-align: left;
  cursor: pointer;

  &:hover {
    @include state(hover);
  }
}

.SingleSelectOption {
  @include unstyled-button;
  text-align: left;

  &:not(.disabled) {
    color: inherit;
  }

  .Media {
    padding: 0 spacing(tight) 0 0;
  }
}

.Label,
.SingleSelectOption {
  display: flex;
  align-items: center;
  width: 100%;
  padding: spacing(tight) spacing();
}

.Checkbox {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  width: $control-size;
  height: $control-size;
  margin-right: spacing(tight);
}

.focused {
  @include state(focused);

  &:hover {
    @include state(focused, hover);
  }
}

.disabled {
  @include state(disabled);

  .Media {
    @include recolor-icon(color('ink', 'lightest'), color('white'));
  }
}

.select {
  @include state(selected);

  &.focused {
    @include state(selected, focused);

    &:hover {
      @include state(selected, focused, hover);
    }
  }
}

.active {
  @include state(active);
}

.Media {
  @include recolor-icon(color('ink', 'light'), color('white'));
  padding: 0 spacing(tight);
}
