// Variables //—————————————————— $toggle-height: 32px !default; $toggle-checkbox-opacity: 0 !default;

$toggle-transition-value: all .25s ease-in-out !default;

$toggle-default-background-color: $white !default; $toggle-checked-background-color: $grass-light !default; $toggle-disabled-background-color: $lightgray-dark !default;

$toggle-handle-width: 50px !default; $toggle-handle-height: 32px !default; $toggle-handle-radius: 19px !default;

$toggle-control-width: 30px !default; $toggle-control-height: 30px !default; $toggle-control-radius: 30px !default;

$toggle-shadow: inset 0 0 0 1px lighten($mediumgray-dark, 5%) !default; $toggle-control-shadow: inset 0 0 0 1px lighten($mediumgray-dark, 5%), 1px 1px 1px lighten($mediumgray-dark, 10%) !default; $toggle-checked-shadow: inset 0 0 0 1px $lightgray-light, 1px 1px 1px lighten($mediumgray-dark, 10%) !default;

// Exports //——————————————————

@include exports(“toggle”) {

/**
 * toggle
 * --------------------------------------------------
 */
.toggle {
      height: $toggle-height;

      & input[type="checkbox"],
      & input[type="radio"] {
              width: 0;
              height: 0;
              margin: 0;
              padding: 0;
              text-indent: -100000px;
              @include opacity($opacity: $toggle-checkbox-opacity, $filter: true);
      }

      & .handle {
              display: block;
              position: relative;
              top: -20px;
              left: 0;
              width: $toggle-handle-width;
              height: $toggle-handle-height;
              background-color: $toggle-default-background-color;
              @include radius($value: $toggle-handle-radius);
              @include box-shadow($value:$toggle-shadow);

              &:before,
              &:after {
                      content: "";
                      position: absolute;
                      top: 1px;
                      left: 1px;
                      display: block;
                      width: $toggle-control-width;
                      height: $toggle-control-height;
                      @include radius($value: $toggle-control-radius);
                      @include transition($toggle-transition-value);
                      background-color: $toggle-default-background-color;
                      @include box-shadow($value:$toggle-control-shadow);
              }

      }
      & input[type="checkbox"]:disabled + .handle,
      & input[type="radio"]:disabled + .handle,
      & input[type="checkbox"]:disabled + .handle:before,
      & input[type="radio"]:disabled + .handle:before,
      & input[type="checkbox"]:disabled + .handle:after,
      & input[type="radio"]:disabled + .handle:after {
              @include opacity($opacity: 60, $filter: true);
              background-color: $toggle-disabled-background-color;
      }

      & input[type="checkbox"]:checked + .handle:before,
      & input[type="radio"]:checked + .handle:before {
              width: $toggle-handle-width;
              background-color: $toggle-checked-background-color;
      }
      & input[type="checkbox"]:checked + .handle:after,
      & input[type="radio"]:checked + .handle:after {
              left: 20px;
              @include box-shadow($value:$toggle-checked-shadow);
      }
}

}