/*
TOGGLE SWITCH
=============
aka a checkbox that looks like a switch
*/

@import '~styles/variables';

$active-color: $green;
$disabled-color: #ddd;
$toggle-height: 25px;
$switch-height: calc(#{$toggle-height} + 4px);

.ToggleSwitch {
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-weight: 400;
  height: $switch-height;
  outline: none;
  position: relative;
  user-select: none;

  & > div {
    height: $switch-height;
  }

  &.disabled {
    cursor: not-allowed;
  }

  &.active {
    .ToggleSwitch-label {
      background-color: $active-color;
      box-shadow: none;
      color: $white;
      justify-content: flex-start;
    }

    .ToggleSwitch-handle {
      box-shadow: none;
    }
  }

  &-input {
    position: absolute;
    right: 10px;
    top: 2px;
    z-index: -1;

    &:focus,
    &:active {
      & ~ div .ToggleSwitch-label {
        box-shadow: 0 0 5px rgba($blue, 0.8);
      }
    }
  }

  &-label {
    align-items: center;
    background-color: $disabled-color;
    border-radius: 50px;
    box-shadow: inset 0 0 5px rgba(darken($disabled-color, 15%), 0.4);
    box-sizing: border-box;
    display: inline-flex;
    font-size: 0.8em;
    height: $switch-height;
    justify-content: flex-end;
    margin-left: 5px;
    padding: 2px;
    width: calc(#{$toggle-height} * 2.5);
    z-index: 1;

    &-text {
      display: inline-block;
      padding: 0 $pad-mar-x-small;
    }
  }

  &-handle {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 2px 2px 5px 0 rgba($med-gray, 0.4);
    display: inline-block;
    height: $toggle-height;
    margin-left: calc(#{$toggle-height} * -2.4);
    margin-top: 2px;
    position: absolute;
    transition: margin ease 0.3s;
    width: $toggle-height;

    &.active {
      margin-left: calc(-#{$toggle-height} - 3px);
    }
  }
}