// RAMEN FORM CHECKBOX COMPONENT
//
//
// Required Global Variables:
//
// $global-transition-speed
// $global-easing
// $base-line-height
//
//
// Required Component Variables:
//
// $form-checkbox-color: Sets the text colour of the checkbox label
// $form-checkbox-font-size: Sets the font size of the checkbox label
// $form-checkbox-background-color: Sets the background color of the checkbox
// $form-checkbox-background-color-checked: Sets the background color of the checked checkbox
// $form-checkbox-border: Sets the border of the checkbox
// $form-checkbox-border-radius: Sets the border radius of the checkbox
// $form-checkbox-size: Sets the size of the checkbox
// $form-checkbox-check-icon: Base64 encoded url to the SVG check icon;
// $form-checkbox-check-icon-size: Size of the check icon;
// $form-checkbox-spacing: Spacing between check and label
// $form-radio-margin-bottom: Spacing after each checkbox item
//
//

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

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

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

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

@mixin form-checkbox-label-after {
  background-image: $form-checkbox-check-icon;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: $form-checkbox-check-icon-size;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: $form-checkbox-check-icon-size;
}

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

  &:checked {
    & + .c-form-checkbox__label:before {
      background-color: $form-checkbox-background-color-checked;
    }

    & + .c-form-checkbox__label:after {
      opacity: 1;
    }
  }
}

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

  &__label {
    @include form-checkbox-label;

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

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

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