/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016-2021 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '~bpk-mixins/index';

$bpk-spacing-v2: true;

$primary-on-color: $bpk-color-sky-blue;
$event-on-color: $bpk-color-abisko;
$off-color: $bpk-color-sky-gray-tint-06;
$handle-color: $bpk-color-white;

$height: bpk-spacing-xl();
$width: bpk-spacing-sm() * 13;
$border-width: $bpk-one-pixel-rem * 2;

.bpk-switch {
  position: relative;
  display: inline-block;

  // Checkbox is invisible so the switch element can be the visual element.
  &__checkbox {
    position: absolute;
    opacity: 0;

    &:checked ~ .bpk-switch__switch {
      &--primary {
        @include bpk-themeable-property(
          background,
          --bpk-switch-checked-color,
          $primary-on-color
        );
      }

      &--event {
        background: $event-on-color;
      }

      &::before {
        left: ($width - $height) + $border-width;
      }
    }
  }

  &__label {
    margin-right: bpk-spacing-md();
    line-height: $height;
  }

  // The 'track'.
  &__switch {
    position: relative;
    float: right;
    display: block;
    width: $width;
    height: $height;
    transition: background $bpk-duration-sm linear;
    border-radius: $height / 2;
    background: $off-color;
    cursor: pointer;

    // The 'handle'.
    &::before {
      position: absolute;
      top: $border-width;
      left: $border-width;
      content: '';
      display: block;
      width: $height - ($border-width * 2);
      height: $height - ($border-width * 2);
      transition: left $bpk-duration-sm ease-out;
      border-radius: 50%;
      background: $handle-color;

      @include bpk-box-shadow-sm;
    }
  }
}