/* FORM TOGGLE ! 
 * This is a fancy checkbox on off sorta thing
 *
 * Variables:
 *
 * $form-toggle-border-width: Border width
 * $form-toggle-height: Height of whole toggle
 * $form-toggle-width: Width of whole toggle
 * $form-toggle-border-radius: Border radius, defaults to 34px for pill shape
 * $form-toggle-background-color: Background colour
 * $form-toggle-on-background-color: Background colour when toggle is on
 * $form-toggle-border: Border of form toggle
 * $form-toggle-on-border: Border when toggle is on
 * $form-toggle-toggle-color: Text colour
 * $form-toggle-toggle-border: The toggle border
 * $form-toggle-on-toggle-border: The toggle border when switched on
 * $form-toggle-transition-speed: transition speed
 * $form-toggle-easing: Easing
 * $form-toggle-justify-content: flex spacing of content
 * $form-toggle-label-margin-right: Right margin of label
 * 
 */

$form-toggle-border-width: 2px !default;
$form-toggle-height: toRems(32px) !default;
$form-toggle-width: toRems(54px) !default;
$form-toggle-border-radius: toRems(34px) !default;
$form-toggle-background-color: $c-white !default;
$form-toggle-on-background-color: $c-black !default;
$form-toggle-border: $form-toggle-border-width solid $c-grey-400 !default;
$form-toggle-on-border: $form-toggle-border-width solid $c-black !default;
$form-toggle-toggle-color: $c-white !default;
$form-toggle-toggle-border: $form-toggle-border-width solid $c-grey-400 !default;
$form-toggle-on-toggle-border: $form-toggle-border-width solid $c-black !default;
$form-toggle-transition-speed: 200ms !default;
$form-toggle-easing: $global-easing !default;
$form-toggle-justify-content: flex-start !default;
$form-toggle-label-margin-right: $spacing-base !default;

.c-form-toggle {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: $form-toggle-justify-content;

  &__label {
    margin-right: $form-toggle-label-margin-right;
  }

  // active state
  &.is-checked {
    .c-form-toggle__slider {
      background-color: $form-toggle-on-background-color;
      border: $form-toggle-on-border;

      &::before {
        border: $form-toggle-on-toggle-border;
        transform: translateX(calc(100% - #{$form-toggle-border-width * 2}));
      }
    }
  }

  &__slider {
    background-color: $form-toggle-background-color;
    border-radius: $form-toggle-border-radius;
    border: $form-toggle-border;
    cursor: pointer;
    height: $form-toggle-height;
    position: relative;
    transition: background-color $form-toggle-transition-speed
      $form-toggle-easing;
    width: $form-toggle-width;

    //the switch
    &:before {
      background-color: $form-toggle-toggle-color;
      border: $form-toggle-toggle-border;
      border-radius: 50%;
      content: '';
      height: calc(100% + #{$form-toggle-border-width * 2});
      left: -$form-toggle-border-width;
      position: absolute;
      top: -$form-toggle-border-width;
      transition: transform $form-toggle-transition-speed $form-toggle-easing;
      width: calc(50% + #{$form-toggle-border-width * 2});
    }
  }
}