/*
  SWITCH
  ------
*/

/// @Foundation.settings
// Switch
$switch-width: rem-calc(50) !default;
$switch-height: rem-calc(32) !default;
$switch-background: #ccc !default;
$switch-background-active: $primary-color !default;
$switch-border: 0 !default;
$switch-radius: 9999px !default;
$switch-animation-speed: 0.15s !default;

$switch-paddle-color: white !default;
$switch-paddle-offset: 4px !default;
///

%switch {
    position: relative;
    overflow: hidden;
    display: inline-block;

    > input {
        position: absolute;
        left: -9999px;
        outline: none;
    }

    > label {
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        margin: 0;

        // Paddle
        &::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    input + label {
        margin-left: 0;
    }
}

/*
  Defines the dimmensions of the switch.

  $width - width of the switch.
  $height - height of the switch.
*/
@mixin switch-layout($width: $switch-width, $height: $switch-height) {
    width: $width;
    height: $height;
    > label {
        &::after {
            width: $height;
            height: $height;
        }
    }
    input:checked + label {
        &::after {
            left: $width - $height;
        }
    }
}
@mixin switch-style(
    $background: $switch-background,
    $background-active: $switch-background-active,
    $border: $switch-border,
    $radius: $switch-radius,
    $paddle-color: $switch-paddle-color,
    $paddle-offset: $switch-paddle-offset,
    $animation-speed: $switch-animation-speed
) {
    @if hasvalue($border) {
        border: $border;
    }
    border-radius: $radius;
    > label {
        background: $background;
        &::after {
            background: $paddle-color;
            border-radius: $radius;
            transition: left $animation-speed ease-out;
            @if hasvalue($paddle-offset) {
                border: $paddle-offset solid $background;
            }
        }
    }
    input:checked + label {
        background: $background-active;
        margin: 0;
        &::after {
            @if hasvalue($paddle-offset) {
                border-color: $background-active;
            }
        }
    }
}
@mixin switch() {
    @extend %switch;
    @include switch-layout;
    @include switch-style;
}
@include exports(switch) {
    .switch {
        @include switch;
        &.small {
            @include switch-layout(rem-calc(40), rem-calc(26));
        }
        &.large {
            @include switch-layout(rem-calc(60), rem-calc(38));
        }
    }
}
