Switch

// Name:            Switch
// Description:     Input switch in website's forms
//
// Component:       `c-form-switch`
//
// ========================================================================

// Variables
// ========================================================================

$switch-width: 40px;
$switch-height: 20px;
$switch-radius: 23px;
$switch-button: 16px;

// ========================================================================

.c-form {
  &-switch {
    width: auto;
    display: inline-block;
    white-space: nowrap;
  
    .c-form-label {
      display: inline-block;
      position: absolute;
      padding-bottom: 0;
      left: calc(#{$switch-width} + #{$margin-xsmall});
      cursor: pointer;
    }
    
    input {
      width: 0;
      height: 0; 
      opacity: 0;

      &:checked + .c-form-switcher {
        background-color: $interactive-01;

        &::before {
          -webkit-transform: translateX(20px);
          -ms-transform: translateX(20px);
          transform: translateX(20px);
        }
      }
    }
  }
  
  &-switcher {
    width: $switch-width;
    height: $switch-height;
    border-radius: $switch-radius;
    background-color: $ui-03;
    -webkit-transition: .4s;
    transition: .4s;

    &::before {
      position: absolute;
      bottom: 2px;
      left: 2px;
      content: "";
      width: $switch-button;
      height: $switch-button;
      border-radius: 50%;
      background-color: $ui-01;
      -webkit-transition: .4s;
      transition: .4s;
    }
  }
}