/*------------------------------------*\
   #OBJECTS-SWITCH
\*------------------------------------*/

// Switch base styles
.switch {
    min-width: 35px;
    min-height: 24px;
}

@each $key, $color in $colors {
    .switch--#{$key} .switch__input:checked + .switch__label {
        &:before {
            background-color: rgba($color, 0.5);
        }

        &:after {
            background-color: $color;
        }
    }
}

    // Checkbox input
    .switch__input {
        @include visually-hidden();

        &:not(:checked) {
            & + .switch__label {
                &:before {
                    background-color: $black-3;
                }

                &:after {
                    background-color: $grey-50;
                }
            }
        }

        &:checked {
            & + .switch__label {
                &:before {
                    background-color: rgba($accent, 0.5);
                }

                &:after {
                    background-color: $accent;
                }
            }
        }

        .switch--left &:checked + .switch__label:after {
            @include transform(translateX(15px));
        }

        .switch--right &:checked + .switch__label:after {
            @include transform(translateX(0));
        }

        &[disabled] {
            & + .switch__label {
                cursor: not-allowed;
                color: $black-3;

                &:before {
                    background-color: $black-4;
                }

                &:after {
                    background-color: $grey-400;
                }
            }

            & ~ .switch__help {
                color: $black-3;
            }
        }
    }

    // Switch label
    .switch__label {
        display: block;
        position: relative;
        @include typography('subheading-1');
        cursor: pointer;
        @include user-select(none);

        .switch--left & {
            padding-left: 45px;
        }

        .switch--right & {
            padding-right: 45px;
        }

        .switch--standalone & {
            padding: 0;
        }

        &:before {
            content: '';
            @include position(absolute, 5px null null null);
            z-index: 1;
            @include size(35px 14px);
            border-radius: 7px;
            @include transition-property(background-color);
            @include transition-duration(0.2s);
        }

        .switch--left &:before {
            left: 0;
        }

        .switch--right &:before {
            right: 0;
        }

        &:after {
            content: '';
            @include position(absolute, 2px null null null);
            z-index: 2;
            display: block;
            @include size(20px);
            border-radius: 50%;
            @include elevation(1);
            @include transition-property(background-color, transform);
            @include transition-duration(0.2s);
        }

        .switch--left &:after {
            left: 0;
        }

        .switch--right &:after {
            right: 0;
            @include transform(translateX(-15px));
        }
    }

    // Switch help
    .switch__help {
        display: block;
        @include typography('body-1');
        color: $black-2;
        text-align: left;

        .switch--left & {
            padding-left: 45px;
        }

        .switch--right & {
            padding-right: 45px;
        }
    }