// RAMEN FORM RADIO COMPONENT
//
//
// Required Global Variables:
//
// $global-transition-speed
// $global-easing
// $base-line-height
//
//
// Required Component Variables:
//
// $form-radio-color: Sets the text colour of the radio label
// $form-radio-font-size: Sets the font size of the radio label
// $form-radio-background-color: Sets the background color of the radio
// $form-radio-background-color-selected: Sets the background color of the selected radio
// $form-radio-border: Sets the border of the radio
// $form-radio-size: Sets the size of the radio
// $form-radio-check-size: Size of the selected radio;
// $form-radio-spacing: Spacing between the radio and label
// $form-radio-margin-bottom: Space after each radio component
//
//

@mixin form-radio {
  margin-bottom: $form-radio-margin-bottom;

  &:last-child {
    margin-bottom: 0;
  }
}

@mixin form-radio-label {
  color: $form-radio-color;
  cursor: pointer;
  font-size: $form-radio-font-size;
  line-height: $base-line-height;
  padding-left: $form-radio-size + $form-radio-spacing;
  position: relative;
}

@mixin form-radio-label-before {
  background: $form-radio-background-color;
  border-radius: 100%;
  border: $form-radio-border;
  content: '.';
  cursor: pointer;
  height: $form-radio-size;
  left: 0;
  position: absolute;
  text-indent: -999em;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color $global-transition-speed $global-easing;
  width: $form-radio-size;
}

@mixin form-radio-label-after {
  border-radius: 100%;
  content: '.';
  cursor: pointer;
  height: $form-radio-check-size;
  left: ($form-radio-size - $form-radio-check-size) / 2;
  position: absolute;
  text-indent: -999em;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color $global-transition-speed $global-easing;
  width: $form-radio-check-size;
}

@mixin form-radio-input {
  left: -9999em;
  position: absolute;

  &:checked {
    & + .c-form-radio__label:after {
      background: $form-radio-background-color-selected;
    }
  }
}

.c-form-radio {
  @include form-radio;

  &__label {
    @include form-radio-label;

    &:before {
      @include form-radio-label-before;
    }

    &:after {
      @include form-radio-label-after;
    }
  }

  &__input {
    @include form-radio-input;
  }
}