//
// Toggles
// --------------------------------------------------

$toggle-height: 32px !default;//16px !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: $primary !default;
$toggle-red-background-color: $danger-dark;
$toggle-disabled-background-color: $lightgray !default;
$toggle-disabled-border-color: $mediumgray !default;

$toggle-handle-width: 32px !default;
$toggle-handle-height: 16px !default;
$toggle-handle-radius: 8px !default;

$toggle-control-width: 12px !default;
$toggle-control-height: 12px !default;
$toggle-control-radius: 50% !default;

.toggle {
   display: inline-flex;
   align-items: center;
   height: $toggle-height;
   cursor: pointer;
   margin-bottom: 0;

   &:has(input:disabled) {
      pointer-events: none;
   }

   input[type="checkbox"],
   input[type="radio"] {
      width: 0;
      height: 0;
      margin: 0;
      padding: 0;
      text-indent: -100000px;
      opacity: $toggle-checkbox-opacity;
      position: absolute;
   }

   &.toggle-red {
      input[type="checkbox"]:checked + .handle,
      input[type="radio"]:checked + .handle {
         background-color: $toggle-red-background-color;
         border-color: $toggle-red-background-color;
      }

      &:hover,
      &:active,
      &:focus {
         input[type="checkbox"]:checked + .handle,
         input[type="radio"]:checked + .handle {
            background-color: darken($toggle-red-background-color, 8%);
            border-color: darken($toggle-red-background-color, 8%);
         }
      }
   }

   .handle {
      display: block;
      position: relative;
      left: 0;
      width: $toggle-handle-width;
      height: $toggle-handle-height;
      background-color: $toggle-default-background-color;
      border-radius: $toggle-handle-radius;
      border: 1px solid $mediumgray;
      transition: $toggle-transition-value;

      &::before {
         content: "";
         position: absolute;
         top: 1px;
         left: 1px;
         display: block;
         width: $toggle-control-width;
         height: $toggle-control-height;
         border-radius: $toggle-control-radius;
         transition: $toggle-transition-value;
         background-color: $mediumgray;
      }
   }

   input[type="checkbox"]:disabled + .handle,
   input[type="radio"]:disabled + .handle {
      border-color: $toggle-disabled-border-color;
      background: $toggle-disabled-background-color;

      &::before {
         background: $toggle-disabled-border-color;
      }
   }

   input[type="checkbox"]:disabled:checked + .handle,
   input[type="radio"]:disabled:checked + .handle {
      border-color: $toggle-disabled-border-color;
      background: $toggle-disabled-border-color;
   }

   input[type="checkbox"]:checked + .handle,
   input[type="radio"]:checked + .handle {
      background-color: $toggle-checked-background-color;
      border-color: $toggle-checked-background-color;
   }

   input[type="checkbox"]:checked + .handle::before,
   input[type="radio"]:checked + .handle::before {
      background-color: $toggle-default-background-color;
      left: calc(100% - 13px);
   }

   &:hover,
   &:active,
   &:focus {
      input[type="checkbox"]:checked + .handle,
      input[type="radio"]:checked + .handle {
         background-color: darken($toggle-checked-background-color, 8%);
         border-color: darken($toggle-checked-background-color, 8%);
      }
   }

   + label {
      margin-bottom: 0;
   }
}