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

$checkbox-active-background-color: var(--primary) !default;
$checkbox-focus-box-shadow-color-hsla: bulma-utilities.bulmaVarOpacity(primary, 0.8) !default;
$checkbox-focus-box-shadow-color: var(--checkbox-focus-box-shadow-color-hsla) !default;
$checkbox-background-color: transparent !default;
$checkbox-border-color: var(--grey) !default;
$checkbox-border-radius: var(--radius) !default;
$checkbox-border-width: 2px !default;
$checkbox-checkmark-color: var(--primary-invert) !default;
$checkbox-size: 1.25em !default;
$checkbox-padding: var(--control-padding-horizontal) !default;
$checkbox-colors: bulma-form.$form-colors !default;

// Map Local variables
$-css-vars-map: (
    "checkbox-active-background-color": $checkbox-active-background-color,
    "checkbox-focus-box-shadow-color-hsla": $checkbox-focus-box-shadow-color-hsla,
    "checkbox-focus-box-shadow-color": $checkbox-focus-box-shadow-color,
    "checkbox-background-color": $checkbox-background-color,
    "checkbox-border-color": $checkbox-border-color,
    "checkbox-border-radius": $checkbox-border-radius,
    "checkbox-border-width": $checkbox-border-width,
    "checkbox-checkmark-color": $checkbox-checkmark-color,
    "checkbox-size": $checkbox-size,
    "checkbox-padding": $checkbox-padding,
);

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

.b-checkbox {
    &.checkbox {
        @extend %unselectable;

        display: inline-flex;
        align-items: center;
        outline: none;

        &:not(.button) {
            margin-right: 0.5em;

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

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

            + .check {
                flex-shrink: 0;
                width: var(--checkbox-size);
                height: var(--checkbox-size);
                background: var(--checkbox-background-color);
                border: var(--checkbox-border-width) solid var(--checkbox-border-color);
                border-radius: var(--checkbox-border-radius);
                transition: background calc(var(--speed) * 2) var(--easing);
            }

            &:checked,
            &:indeterminate {
                & +.check {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: var(--weight-bold);
                    color: var(--checkbox-checkmark-color);
                    text-align: center;
                    background: var(--checkbox-active-background-color); // url(functions.checkmark($checkbox-checkmark-color)) no-repeat center center;
                    border-color: var(--checkbox-active-background-color);

                    @each $name, $pair in $checkbox-colors {
                        $color: list.nth($pair, 1);
                        $color-invert: list.nth($pair, 2);
                        &.is-#{$name} {
                            color: var(--#{$name}-invert);
                            background: var(--#{$name}); // url(functions.checkmark($color-invert)) no-repeat center center;
                            border-color: var(--#{$name});
                        }
                    }

                    &::before {
                        position: absolute;
                        font-family: system-ui;
                    }
                }
            }

            &:checked + .check {
                &::before {
                    content: "✓";
                }
            }

            &:indeterminate + .check {
                &::before {
                    content: "─";
                }
            }

            &:focus {
                + .check {
                    box-shadow: 0 0 0.5em var(--grey-light);
                }

                &:checked + .check {
                    box-shadow: 0 0 0.5em var(--checkbox-focus-box-shadow-color);

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

        .control-label {
            padding-left: var(--checkbox-padding);
        }

        &.button {
            display: flex;
        }

        &[disabled] {
            opacity: 0.5;
        }

        &:hover {
            input[type="checkbox"]:not(:disabled) + .check {
                border-color: var(--checkbox-active-background-color);

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

        @include bulma-utilities.control-sizes;
    }
}