@use "sass:list";
@use "../../../bulma/sass/utilities" as bulma-utilities;
@use "../../../bulma/sass/form/shared" as bulma-form;

$switch-width: 2.75em !default;
$switch-padding: 0.2em !default;
$switch-active-background-color: var(--primary) !default;
$switch-colors: bulma-form.$form-colors !default;

// Map Local variables
$-css-vars-map: (
    "switch-width": $switch-width,
    "switch-padding": $switch-padding,
    "switch-active-background-color": $switch-active-background-color,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("switch", $-css-vars-map);

.switch {
    @extend %unselectable;

    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0.5em;
    cursor: pointer;

    & + .switch:last-child {
        margin-right: 0;
    }

    input[type="checkbox"] {
        position: absolute;
        left: 0;
        z-index: -1;
        outline: none;
        opacity: 0;

        + .check {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            width: var(--switch-width);
            height: calc(var(--switch-width) * 0.5 + var(--switch-padding));
            padding: var(--switch-padding);
            background: var(--grey-light);
            border-radius: var(--radius);
            transition: background calc(var(--speed) * 2) var(--easing), box-shadow calc(var(--speed) * 2) var(--easing);

            @each $name, $pair in $switch-colors {
                $color: list.nth($pair, 1);

                &.is-#{$name}-passive,
                &:hover {
                    background: var(--#{$name});
                }

                &.input[type="checkbox"] + &.check {
                    background: pink;
                }
            }

            &::before {
                display: block;
                width: calc((var(--switch-width) - var(--switch-padding) * 2) * 0.5);
                height: calc((var(--switch-width) - var(--switch-padding) * 2) * 0.5);
                content: "";
                background: var(--background);
                border-radius: var(--radius);
                box-shadow: 0 3px 1px 0 rgb(var(--scheme-invert-rgb) 0.05),
                    0 2px 2px 0 rgb(var(--scheme-invert-rgb) 0.1),
                    0 3px 3px 0 rgb(var(--scheme-invert-rgb) 0.05);
                transition: transform calc(var(--speed) * 2) var(--easing);
                transform-origin: left;
                will-change: transform;
            }

            &.is-elastic::before {
                border-radius: var(--radius);
                transform: scaleX(1.5);
            }
        }

        &:checked + .check {
            background: var(--switch-active-background-color);

            @each $name, $pair in $switch-colors {
                $color: list.nth($pair, 1);
                &.is-#{$name} {
                    background: var(--#{$name});
                }
            }

            &::before {
                transform: translate3d(100%, 0, 0);
            }

            &.is-elastic::before {
                // Might be a little offset if base font is not 16px
                transform: translate3d(50%, 0, 0) scaleX(1.5);
            }
        }

        &:focus,
        &:active {
            outline: none;

            + .check {
                box-shadow: 0 0 0.5em var(--grey-lightest);

                @each $name, $pair in $switch-colors {
                    $color: list.nth($pair, 1);
                    &.is-#{$name}-passive {
                        box-shadow: 0 0 0.5em bulma-utilities.bulmaVarOpacity($name, 0.8);
                    }
                }
            }

            &:checked + .check {
                box-shadow: 0 0 0.5em var(--grey-lighter);

                @each $name, $pair in $switch-colors {
                    $color: list.nth($pair, 1);
                    &.is-#{$name} {
                        box-shadow: 0 0 0.5em bulma-utilities.bulmaVarOpacity($name, 0.8);
                    }
                }
            }
        }
    }

    &.has-left-label {
        flex-direction: row-reverse;

        .control-label {
            padding-right: var(--control-padding-horizontal);
        }
    }

    &:not(.has-left-label) {
        .control-label {
            padding-left: var(--control-padding-horizontal);
        }
    }

    &:hover {
        input[type="checkbox"] + .check {
            background: var(--grey-lighter);

            @each $name, $pair in $switch-colors {
                $color: list.nth($pair, 1);
                &.is-#{$name}-passive {
                    background: bulma-utilities.bulmaVarOpacity($name, 0.9);
                }
            }
        }

        input[type="checkbox"]:checked + .check {
            background: var(--grey-lighter);

            @each $name, $pair in $switch-colors {
                $color: list.nth($pair, 1);
                &.is-#{$name} {
                    background: bulma-utilities.bulmaVarOpacity($name, 0.9);
                }
            }
        }
    }

    &.is-rounded {
        input[type="checkbox"] {
            + .check {
                border-radius: var(--radius-rounded);

                &::before {
                    border-radius: var(--radius-rounded);
                }
            }

            &.is-elastic::before {
                border-radius: var(--radius-rounded);
                transform: scaleX(1.5);
            }
        }
    }

    &.is-outlined {
        input[type="checkbox"] {
            + .check {
                background: transparent;
                border: 0.1rem solid var(--grey-light);

                @each $name, $pair in $switch-colors {
                    $color: list.nth($pair, 1);
                    &.is-#{$name}-passive {
                        border: 0.1rem solid bulma-utilities.bulmaVarOpacity($name, 0.9);

                        &::before {
                            background: var(--#{$name});
                        }

                        &:hover {
                            border-color: bulma-utilities.bulmaVarOpacity($name, 0.9);
                        }
                    }
                }

                &::before {
                    background: var(--grey-light);
                }
            }

            &:checked + .check {
                border-color: var(--switch-active-background-color);

                @each $name, $pair in $switch-colors {
                    $color: list.nth($pair, 1);
                    &.is-#{$name} {
                        background: transparent;
                        border-color: var(--#{$name});

                        &::before {
                            background: var(--#{$name});
                        }
                    }
                }

                &::before {
                    background: var(--switch-active-background-color);
                }
            }
        }

        &:hover {
            input[type="checkbox"] + .check {
                background: transparent;
                border-color: var(--grey-lighter);
            }

            input[type="checkbox"]:checked + .check {
                // border-color: rgba($switch-active-background-color, 0.9);
                background: transparent;
                border-color: var(--switch-active-background-color);

                @each $name, $pair in $switch-colors {
                    $color: list.nth($pair, 1);
                    &.is-#{$name} {
                        --#{$name}-a: 0.9;

                        border-color: var(--#{$name});
                    }
                }
            }
        }
    }

    @include bulma-utilities.control-sizes;

    &[disabled] {
        color: var(--grey);
        cursor: not-allowed;
        opacity: 0.5;
    }
}