@import 'main';

$toggle_width: 28px;
$toggle_height: 16px;
$toggle_border-radius: 8px;
$toggle_inner_circle_size: 10px;
$toggle_margin: ($toggle_height - $toggle_inner_circle_size) / 2;
$toggle_transition: 400ms, cubic-bezier(0.175, 0.885, 0.32, 1.275), left;

.toggle {
  &, & label {
    cursor: pointer;
  }

  input[type=checkbox] {
    display: none;

    &:not(:checked) + .icon:before{
      left: $toggle_margin;
    }

    &:checked + .icon:before {
      left: $toggle_width - $toggle_inner_circle_size - $toggle_margin;
    }

    &:disabled + .icon {
      background-color: $color_grey;

      &:before {
        background-color: $color_light;
      }
    }

    &:not(:disabled) {
      & + .icon:before {
        background-color: $color_paper;
      }

      &:checked + .icon {
        background-color: $color_primary;
      }

      &:not(:checked) + .icon {
        background-color: $color_dark;
      }
    }
  }
}

.icon {
  cursor: pointer;
  width: $toggle_width;
  height: $toggle_height;
  @include border-radius($toggle_border-radius);

  &:before {
    content: '';
    position: absolute;
    top: $toggle_margin;
    width: $toggle_inner_circle_size;
    height: $toggle_inner_circle_size;
    @include border-radius(50%);
    @include transition($toggle_transition...);
  }
}