$switch-width: 50px;
$switch-border-radius: 200px;
$switch-indicator-width: 17px;
$switch-background-color: $lightGray;
$switch-checked-background-color: $darkGray;
$switch-indicator-color: $white;
$switch-indicator-height: $switch-indicator-width;
$switch-indicator-border-radius: 27px;
$mini-switch-width: 30px;
$sm-switch-width: 40px;
$lg-switch-width: 70px;
$xl-switch-width: 80px;

.switch {
  height: 0;
  width: 0;
  visibility: hidden;

  & + label {
    cursor: pointer;
    width: $switch-width;
    height: calc($switch-width / 2);
    background: $switch-background-color;
    display: block;
    border-radius: $switch-border-radius;
    position: relative;
    transition: all 0.3s;
  }

  & + label:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: $switch-indicator-width;
    height: $switch-indicator-height;
    background: $switch-indicator-color;
    border-radius: $switch-indicator-border-radius;
    transition: 0.3s;
  }

  &:checked + label {
    background: $switch-checked-background-color;
  }

  &:checked + label:after {
    left: calc(100% - 5px) !important;
    transform: translateX(-100%);
  }

  & + label:active:after {
    width: calc($switch-width - 10px);
  }

  &.mini {
    & + label {
      width: $mini-switch-width;
      height: calc($mini-switch-width / 2);
    }

    & + label:after {
      top: 4px;
      left: 4px;
      width: calc(($mini-switch-width / 2) - 8px);
      height: calc(($mini-switch-width / 2) - 8px);
    }

    & + label:active:after {
      width: calc($mini-switch-width - 10px);
    }
  }

  &.sm {
    & + label {
      width: $sm-switch-width;
      height: calc($sm-switch-width / 2);
    }

    & + label:after {
      top: 4px;
      left: 4px;
      width: calc(($sm-switch-width / 2) - 8px);
      height: calc(($sm-switch-width / 2) - 8px);
    }

    & + label:active:after {
      width: calc($sm-switch-width - 10px);
    }
  }

  &.lg {
    & + label {
      width: $lg-switch-width;
      height: calc($lg-switch-width / 2);
    }

    & + label:after {
      top: 4px;
      left: 4px;
      width: calc(($lg-switch-width / 2) - 8px);
      height: calc(($lg-switch-width / 2) - 8px);
    }

    & + label:active:after {
      width: calc($lg-switch-width - 10px);
    }
  }

  &.xl {
    & + label {
      width: $xl-switch-width;
      height: calc($xl-switch-width / 2);
    }

    & + label:after {
      top: 4px;
      left: 4px;
      width: calc(($xl-switch-width / 2) - 8px);
      height: calc(($xl-switch-width / 2) - 8px);
    }

    & + label:active:after {
      width: calc($xl-switch-width - 10px);
    }
  }

  @each $color, $value in $colors {
    &.#{$color} {
      &:checked + label {
        background: $value;
      }
    }
  }

  &.square {
    & + label {
      border-radius: 4px;
    }

    & + label:after {
      border-radius: 2px;
    }
  }
}