/*!
 * Copyright (c) 2014-present Cliqz GmbH. All rights reserved.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

$blue: #00B0F2;
$grey: #CCCCCC;
$white: #FFFFFF;

$button-border: 1px;
$button-size: 18px;
$toggle-height: 20px;
$toggle-width: 38px;
$slider-width: 38px;

.switch {
    position: absolute;
    right: 25px;
    height: $toggle-height;
    width: $toggle-width;
    cursor: pointer;

    .toggle {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        height: $toggle-height;
        width: $toggle-width;
        border-radius: 34px;
        background-color: $grey;
        transition: .4s cubic-bezier(1,0,0,1);
      }

      .slider:before {
        position: absolute;
        content: "";
        height: $button-size;
        width: $button-size;
        border-radius: 50%;
        border: $button-border solid $grey;
        background-color: $white;
        transition: .4s cubic-bezier(1,0,0,1);
      }

      input:checked + .slider {
        background-color: $blue;
      }

      input:checked + .slider:before {
        border: $button-border solid $blue;
        background-color: $white;
        transform: translateX(calc(#{$slider-width} - #{$button-size}));
      }
}
