@import "../style/colors";

$radioButtonBorderHeight: 32px;
$radioButtonBorderRadius: 16px;
$radioButtonDisabledOpacity: 0.15;
$radioButtonColor: $midnight-3;
$radioButtonBackground: $white;
$radioButtonBorder: solid 1px $midnight-6;

$radioButtonActiveColor: $white;
$radioButtonActiveBackground: $seafoam-1;
$radioButtonActiveBorder: solid 1px $seafoam-1;

$radioButtonHoverActiveColor: $seafoam-1;
$radioButtonHoverActiveBackground: $white;
$radioButtonHoverActiveBorder: solid 1px $seafoam-1;

$radioButtonDisabledColor: $midnight-6;
$radioButtonDisabledBackground: $white;
$radioButtonDisabledBorder: solid 1px $midnight-6;

.la-radio-button {
  display: inline-flex;
  height: $radioButtonBorderHeight;
  color: $radioButtonColor;
  background-color: $radioButtonBackground;
  border-radius: $radioButtonBorderRadius;
  border: $radioButtonBorder;
  cursor: pointer;
  padding: 0 12px;
  text-align: center;
  line-height: 3.4px;

  &:hover:enabled {
    color: $radioButtonHoverActiveColor;
    border: $radioButtonHoverActiveBorder;
    background-color: $radioButtonHoverActiveBackground;
  }

  &--active {
    color: $radioButtonActiveColor !important;
    background-color: $radioButtonActiveBackground !important;
    border: $radioButtonActiveBorder;
  }

  &--disable {
    color: $radioButtonDisabledColor;
    background-color: $radioButtonDisabledBackground;
    border: $radioButtonDisabledBorder;
    cursor: not-allowed;
  }

  &__icon {
    margin-right: 2px;
    margin-left: -3px;

    &--hide {
      display: none;
    }
  }
}

button:focus {
  outline: none;
}