$radio-size: 16px;
$radio-background: $color-white;
$radio-inner-active-color: $color-white;
$radio-color: $color-white;
$radio-active-background: $color-cerulean;
$radio-border: 1px solid $color-loblolly;
$radio-active-border: 1px solid $color-cerulean;
$radio-inner-disabled-color: $color-mystic;
$radio-inner-active-disabled-color: $color-loblolly;
$radio-margin-right: 10px;

.input-radio {
  display: none;
}

.input-radio + label{
  font-size: rem-calc(12);
  font-weight: 600;
  letter-spacing: rem-calc(0.2);
  text-transform: uppercase;
  position: relative;

  color: $color-pale-sky;

  display: flex;
  align-items: center;
}

.input-radio + label:before {
  content: '';
  display: inline-block;
  width: $radio-size;
  height: $radio-size;
  overflow: hidden;
  margin-right: $radio-margin-right;
  background-color: transparent;
  border: $radio-border;
  background: $radio-background;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  @include transition(0.2s ease-in-out);
  vertical-align: top;
}

.input-radio:checked + label:after {
  content: '';
  width: 6px;
  height: 6px;
  background: $radio-inner-active-color;
  position: absolute;
  display: block;
  top: rem-calc(8);
  left: rem-calc(8);
  @include transform(translate(-50%, -50%));
  border-radius: 50%;
}


.input-radio:checked + label:before {
  background: $radio-inner-active-color;
  border-width: rem-calc(5);
  border-color: $color-cerulean;
}

.input-radio[disabled] + label:before,
.input-radio[disabled]:checked + label:before{
  border-color: $radio-inner-disabled-color;
}

.input-radio[disabled]:checked + label:before {
  box-shadow: 0 0 0 rem-calc(1) $radio-inner-active-disabled-color;
  width: #{$radio-size - 2px};
  height: #{$radio-size - 2px};
}

.input-radio[disabled]:checked + label:after {
  background: $radio-inner-active-disabled-color;
  top: rem-calc(7);
  left: rem-calc(7);
}

.input-radio[disabled] + label:before {
  color: $color-mystic;
  background: $radio-inner-disabled-color;
  border-color: $radio-inner-active-disabled-color;
}

.input-radio.input-radio-error + label:before {
  background: $color-chablis;
  border-color: $color-mandy;
  color: $color-chablis;
}

.input-radio.input-radio-error:checked + label:before {
  box-shadow: 0 0 0 rem-calc(1) $color-mandy;
  border-color: $color-chablis;
  width: #{$radio-size - 2px};
  height: #{$radio-size - 2px};
}

.input-radio.input-radio-error:checked + label:after {
  background: $color-mandy;
  top: rem-calc(7);
  left: rem-calc(7);
}