@use "sass:list";

// Bulma variables - compatible with v0.9.x and v1.x
// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
// v1.x: CSS variables (--bulma-*) will be used if defined
// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)

// Colors
$primary: var(--bulma-primary, #00d1b2);
$white: var(--bulma-white, #fff);
$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
$grey-light: var(--bulma-grey-light, #b5b5b5);
$grey: var(--bulma-grey, #7a7a7a);
$radius: var(--bulma-radius, 4px);

// Sizes - Sass variables for calculations
$size-small: 0.75rem;
$size-normal: 1rem;
$size-medium: 1.25rem;
$size-large: 1.5rem;

// Color map for variations
$colors: (
    "primary": ($primary, $white),
    "link": (var(--bulma-link, #485fc7), $white),
    "info": (var(--bulma-info, #3e8ed0), $white),
    "success": (var(--bulma-success, #48c78e), $white),
    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
    "danger": (var(--bulma-danger, #f14668), $white)
);

$switch-background: $grey-light !default;
$switch-border: 0.1rem solid transparent !default;
$switch-background-active: $primary !default;
$switch-radius: $radius !default;
$switch-paddle-background: $white !default;
$switch-paddle-background-active: $primary !default;
$switch-paddle-offset: 0.25rem !default;
$switch-paddle-transition: all 0.25s ease-out !default;
$switch-focus: 1px dotted $grey-light !default;

@mixin switch-size($size) {
    $switch-height: $size * 1.5;
    $switch-width: $switch-height * 2;
    $paddle-height: $switch-height - ($switch-paddle-offset * 2);
    $paddle-width: $switch-height - ($switch-paddle-offset * 2);
    $paddle-active-offset: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5);

    + label {
        position: relative;
        display: initial;
        font-size: $size;
        line-height: initial;
        padding-left: $switch-width + 0.5;
        padding-top: 0.2rem;
        cursor: pointer;

        &::before {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: $switch-width;
            height: $switch-height;
            border: $switch-border;
            border-radius: $switch-radius;
            background: $switch-background;
            content: "";
        }

        &::after {
            display: block;
            position: absolute;
            top: ($switch-height * 0.5) - ($paddle-height * 0.5);
            left: $switch-paddle-offset;
            width: $paddle-width;
            height: $paddle-height;
            transform: translate3d(0, 0, 0);
            border-radius: $switch-radius;
            background: $switch-paddle-background;
            transition: $switch-paddle-transition;
            content: "";
        }

        &.is-empty {
            padding-left: $switch-width;
            margin: 0 !important;
        }
    }

    &.is-rtl + label {
        padding-left: 0;
        padding-right: $switch-width + 0.5;

        &::before {
            left: auto;
            right: 0;
        }

        &::after {
            left: auto;
            right: $paddle-active-offset;
        }
    }

    &:checked + label::before {
        background: $switch-background-active;
    }

    &:checked + label::after {
        left: $paddle-active-offset;
    }

    &.is-rtl:checked + label::after {
        left: auto;
        right: $switch-paddle-offset;
    }

    &.is-outlined {
        + label {
            &::before {
                background-color: transparent;
                border-color: $switch-background;
            }

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

        &:checked + label {
            &::before {
                background-color: transparent;
                border-color: $switch-background-active;
            }

            &::after {
                background: $switch-paddle-background-active;
            }
        }
    }

    &.is-thin {
        + label {
            &::before {
                top: $switch-height * 0.25;
                height: $switch-height * 0.5;
            }
        }
    }

    &.is-rounded {
        + label {
            &::before {
                border-radius: $switch-height * 0.5;
            }

            &::after {
                border-radius: 50%;
            }
        }
    }
}

.switch[type="checkbox"].bbr-switch {
    outline: 0;
    user-select: none;
    display: inline-block;
    position: absolute;
    opacity: 0;

    &:focus + label::before {
        outline: $switch-focus;
    }

    &[disabled] {
        cursor: not-allowed;

        + label {
            opacity: 0.5;

            &::before {
                opacity: 0.5;
            }

            &::after {
                opacity: 0.5;
            }

            &:hover {
                cursor: not-allowed;
            }
        }
    }

    // Size variations
    @include switch-size($size-normal);

    &.is-small {
        @include switch-size($size-small);
    }

    &.is-medium {
        @include switch-size($size-medium);
    }

    &.is-large {
        @include switch-size($size-large);
    }

    // Color variations
    @each $name, $pair in $colors {
        $color: list.nth($pair, 1);
        $color-invert: list.nth($pair, 2);

        &.is-#{$name} {
            &:checked + label::before {
                background: $color;
            }

            &.is-outlined {
                &:checked + label {
                    &::before {
                        background-color: transparent;
                        border-color: $color !important;
                    }

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

            &.is-thin {
                &.is-outlined {
                    &:checked + label {
                        &::after {
                            box-shadow: none;
                        }
                    }
                }
            }
        }
    }
}