/* @docs */
$switch-active-background-color: $primary !default;
$switch-action-background: #f5f5f5 !default;
$switch-background: $grey-light !default;
$switch-border-radius: $base-border-radius !default;
$switch-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05) !default;
$switch-disabled-opacity: $base-disabled-opacity !default;
$switch-margin-label: .5em !default;
$switch-padding: 0.2em !default;
$switch-rounded-border-radius: $base-rounded-border-radius !default;
$switch-width: 2.75 * 1em !default;
/* @docs */

.o-switch {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
    @include unselectable;

    @each $name, $pair in $colors {
        $color: nth($pair, 1);
        &--#{$name} {
            .o-switch__check--checked {
                @include avariable('background', ('variant-' + #{$name}), $color);
            }
        }
        &--#{$name}-passive {
            .o-switch__check:not(.o-switch__check--checked) {
                @include avariable('background', ('variant-' + #{$name}), $color);
            }
        }
    }

    @each $name, $value in $sizes {
        &--#{$name} {
            @include avariable('font-size', ('font-size-' + #{name}), $value);
        }
    }

    &__label {
        @include avariable('margin-left', 'switch-margin-label', $switch-margin-label);
    }

    &--left {
        flex-direction: row-reverse;
        .o-switch__label {
            margin-left: 0;
            @include avariable('margin-right', 'switch-margin-label', $switch-margin-label);
        }
    }

    &__check-switch {
        content: "";
        display: block;
        @include evariable(
            'height', 'calc(($width - $padding * 2) * 0.5)',
            eparam('$width', variable('switch-width', $switch-width)),
            eparam('$padding', variable('switch-padding', $switch-padding))
        );
        @include evariable(
            'width', 'calc(($width - $padding * 2) * 0.5)',
            eparam('$width', variable('switch-width', $switch-width)),
            eparam('$padding', variable('switch-padding', $switch-padding))
        );
        @include avariable('background', 'switch-action-background', $switch-action-background);
        @include avariable('box-shadow', 'switch-box-shadow', $switch-box-shadow);
        transition-property: transform;
        @include avariable('transition-duration', 'transition-duration', $speed-slow);
        @include avariable('transition-timing-function', 'transition-timing', $easing);
        will-change: transform;
        transform-origin: left;
    }

    &__check {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        @include avariable('width', 'switch-width', $switch-width);
        @include evariable(
            'height', 'calc($width * 0.5 + $padding)',
            eparam('$width', variable('switch-width', $switch-width)),
            eparam('$padding', variable('switch-padding', $switch-padding))
        );
        @include avariable('padding', 'switch-padding', $switch-padding);
        @include avariable('background', 'switch-background', $switch-background);
        @include avariable('border-radius', 'switch-border-radius', $switch-border-radius);
        transition-property: background;
        @include avariable('transition-duration', 'transition-duration', $speed-slow);
        @include avariable('transition-timing-function', 'transition-timing', $easing);

        &--checked {
            @include avariable('background', 'switch-active-background-color', $switch-active-background-color);
            .o-switch__check-switch {
                transform: translate3d(100%, 0, 0);
            }
        }
    }

    &__input {
        position: absolute;
        left: 0;
        opacity: 0;
        z-index: -1;
    }

    &--rounded {
        @include avariable('border-radius', 'switch-rounded-border-radius', $switch-rounded-border-radius);
    }

    &--disabled {
        @include avariable('opacity', 'switch-disabled-opacity', $switch-disabled-opacity);
    }
}