@import "../../variables/colors.scss";

$switchBaseWidth: 40px;
$switchBaseHeight: 24px;
$switchHandleSize: 20px;
$switchHandleBorderSize: 2px;

@mixin make-switch($background: $blue, $foreground: $white) {
  label {
    outline: 0;
    display: inline-block;
    width: $switchBaseWidth;
    height: $switchBaseHeight;
    position: relative;
    cursor: pointer;
    user-select: none;
    background-color: $gray300;
    border-radius: $switchBaseHeight;
    transition: all 200ms ease;

    &:after {
      position: relative;
      display: block;
      content: "";
      width: $switchHandleSize + $switchHandleBorderSize;
      height: $switchHandleSize + $switchHandleBorderSize;

      box-sizing: border-box;
      left: 0px;
      top: ($switchBaseHeight - $switchHandleSize - $switchHandleBorderSize) / 2;
      border-radius: 50%;
      background-color: $foreground;
      border: $switchHandleBorderSize solid $gray300;
      transition: all 200ms ease;
    }
  }

  input[type=checkbox] {
    display: none;
  }

  input[type=checkbox]:checked + label {
    background-color: $background;

    &:after {
      left: $switchBaseWidth - $switchHandleSize - $switchHandleBorderSize;
      border-color: $background;
    }
  }

  &.disabled input[type=checkbox] + label,
  &.disabled input[type=checkbox]:checked + label {
    pointer-events: none;
    background-color: $gray200;
  }
  &.disabled input[type=checkbox]:checked + label:after {
    border-color: $gray200;
  }
}

.switch {
  @include make-switch;
}