@import "../field/_field.settings.psi";

$toggle_border-width: $_border-width !default;
$toggle_border-color: $_text-color !default;

$toggle_color: $_text-color !default;
$toggle_color--disabled: $_action-border-color--disabled !default;

$toggle_size: 20px !default;
$toggle_inset: 3px !default;

$toggle_slot_width: 40px !default;
$toggle_slot_height: $toggle_size + 2 !default;

$toggle_styles: (
    width: $toggle_size,
    height: $toggle_size,
    position: relative,
    bottom: .4em,
    transform: translateY(50%),
    margin-inline-start: 1px,
    background-color: $_field-background-color,
    color: $_field-color,
    border: $toggle_border-width $toggle_border-color solid,
    box-shadow: none,
    transition: $_transition-duration--in,
    transition-property: (border, background-color, box-shadow),
) !default;

$toggle_states--checked: (
    default: (
        background-color: $toggle_color,
        color: $_page-color,
    ),
    hover: (
    ),
    focus: (
    ),
    active: (
    ),
    disabled: (
        background-color: $toggle_color--disabled,
        color: $_field-background-color,
        border-color: transparent,
    ),
    valid: (
    ),
    invalid: (
        background-color: $_negative-color,
        color: $_negative-background-color,
    ),
) !default;

$toggle_size: 18px !default;
$toggle_inset: 3px !default;

$toggle_border-width: $_border-width !default;
$toggle_border-color: $_border-color !default;

$toggle_color: $_text-color !default;
$toggle_color--hover: $_action-border-color !default;
$toggle_color--disabled: $_action-border-color--disabled !default;

$toggle_checkbox_icon_stroke-width:  2 !default;
$toggle_checkbox_icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="{{color}}" stroke-width="#{$toggle_checkbox_icon_stroke-width}" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 6.5L7.5 11L12.5 4"/></svg>' !default;

$toggle_slot_height: 8px !default;
$toggle_slot_width: 36px !default;
$toggle_slot_color: rgba(#7E7E7E, .3) !default;
$toggle_slot_image: '<svg width="#{math.div($toggle_slot_width, 1px)}" height="#{math.div($toggle_slot_height, 1px)}" viewBox="0 0 #{math.div($toggle_slot_width, 1px)} #{math.div($toggle_slot_height, 1px)}" fill="#{$toggle_slot_color}" xmlns="http://www.w3.org/2000/svg"><rect width="#{math.div($toggle_slot_width, 1px)}" height="#{math.div($toggle_slot_height, 1px)}" rx="#{math.div($toggle_slot_height, 2px)}"/></svg>' !default;

$toggle_styles: (
    width: $toggle_size,
    height: $toggle_size,
    position: relative,
    bottom: .4em,
    transform: translateY(50%),
    margin-inline-start: 1px,
    background-color: $_page-color,
    color: $_text-color,
    border: $toggle_border-width $toggle_border-color solid,
    box-shadow: none,
    transition: $_transition-duration--in,
    transition-property: (border, background-color, box-shadow),
) !default;

$toggle_states: (
    default: $toggle_styles,
    hover: (
        box-shadow: 0 0 0 $_focus_border-width $toggle_color--hover,
    ),
    focus: $_focus_styles,
    active: (
    ),
    disabled: (
        border-color: $toggle_color--disabled,
    ),
    valid: (
    ),
    invalid: (
        border-color: $_negative-color,
    ),
) !default;

$toggle_states--checked: (
    default: (
        background-color: $toggle_color,
        color: $_page-color,
    ),
    hover: (
    ),
    focus: (
    ),
    active: (
    ),
    disabled: (
        background-color: $toggle_color--disabled,
        color: $_page-color,
        border-color: transparent,
    ),
    valid: (
    ),
    invalid: (
        background-color: $_negative-color,
        color: white,
    ),
) !default;

$toggle_states--switch: (
    default: (
        bottom: auto,
        transform: none,
        background-color: $toggle_color,
        border-radius: 50% !important,
        transition-property: (border, box-shadow, background-color, left),
    ),
    hover: (
    ),
    focus: (
    ),
    active: (
    ),
    disabled: (
        background-color: white,
        background-image: linear-gradient($toggle_color--disabled, $toggle_color--disabled),
        border: none,
    ),
    valid: (
    ),
    invalid: (
        background-color: $_negative-color,
    ),
) !default;

$toggle_states--switch--checked: (
    default: (
    ),
    hover: (
    ),
    focus: (
    ),
    active: (
    ),
    disabled: (
    ),
    valid: (
    ),
    invalid: (
    ),
) !default;

%toggle {
    display: inline-block;
    position: relative;

    &-marker {
        position: relative;
        z-index: 1;

        display: block;

        pointer-events: none;

        @include styles($toggle_styles);

        &::after {
            content: "";

            display: block;
            position: absolute;
            inset: 0;

            background: transparent center center no-repeat;

            transition: inherit;
        }

    }

    &-input {
        opacity: 0;

        position: absolute;
        inset: (-1 * $toggle_inset);
        z-index: 1;

        cursor: pointer;

        &[disabled],
        &[aria-disabled="true"],
        .is-disabled & {
            cursor: default;
            pointer-events: none;
        }

        &:not([disabled], [aria-disabled="true"]):hover ~ %toggle-marker {
            @include state-styles($toggle_states, hover);
        }

        &:not([disabled], [aria-disabled="true"]):focus-visible ~ %toggle-marker {
            @include state-styles($toggle_states, focus);
        }

        &[disabled] ~ %toggle-marker,
        &[aria-disabled="true"] ~ %toggle-marker,
        .is-disabled & ~ %toggle-marker {
            @include state-styles($toggle_states, disabled);
        }

        [data-invalid="false"] & ~ %toggle-marker,
        &[data-invalid="false"] ~ %toggle-marker,
        & ~ %toggle-marker[data-invalid="false"],
        &--valid ~ %toggle-marker {
            @include state-styles($toggle_states, valid);
        }

        [data-invalid="true"] & ~ %toggle-marker,
        &[data-invalid="true"] ~ %toggle-marker,
        & ~ %toggle-marker[data-invalid="true"],
        &--invalid ~ %toggle-marker {
            @include state-styles($toggle_states, invalid);
        }

        &:checked ~ %toggle-marker {
            @include state-styles($toggle_states--checked);
        }

        &:checked:not([disabled], [aria-disabled="true"]):hover ~ %toggle-marker {
            @include state-styles($toggle_states--checked, hover);
        }

        &:checked:not([disabled], [aria-disabled="true"]):focus-visible ~ %toggle-marker {
            @include state-styles($toggle_states--checked, focus);
        }

        &:checked[disabled] ~ %toggle-marker,
        &:checked[aria-disabled="true"] ~ %toggle-marker {
            @include state-styles($toggle_states--checked, disabled);
        }

        [data-invalid="false"] &:checked ~ %toggle-marker,
        &[data-invalid="false"]:checked ~ %toggle-marker,
        &--valid:checked ~ %toggle-marker {
            @include state-styles($toggle_states--checked, valid);
        }

        [data-invalid="true"] &:checked ~ %toggle-marker,
        &:checked[data-invalid="true"] ~ %toggle-marker,
        &--invalid:checked ~ %toggle-marker {
            @include state-styles($toggle_states--checked, invalid);
        }

    }

}

%toggle--checkbox {

    &-marker {

        &::after {
            opacity: 0;

            color: currentcolor;

            background: center center no-repeat;
            background-image: svg-url($toggle_checkbox_icon, white);

            @supports (mask-image: url()) {
                background-image: none;
                background-color: currentcolor;

                mask-image: svg-url($toggle_checkbox_icon, black);
                mask-repeat: no-repeat;
                mask-position: center center;
            }

        }

        &--checked {

            &::after {
                opacity: 1;
            }

        }

    }

    %toggle-marker {
        @extend %toggle--checkbox-marker;
    }

    %toggle-input:checked ~ %toggle-marker {
        @extend %toggle--checkbox-marker--checked;
    }

}


%toggle--radio {

    &-marker {
        width: ($toggle_size + 2);
        height: ($toggle_size + 2);

        border-radius: 50% !important;

        &::after {
            border-radius: 50% !important;
            border: $toggle_inset solid $_page-color;
        }

        &--disabled {

            &::after {
                border-color: transparent;
            }

        }

    }

    %toggle-marker {
        @extend %toggle--radio-marker;
    }

    %toggle-input:is(input[disabled]):not(:checked),
    %toggle-input:is(input[data-disabled="true"]):not(:checked),
    %toggle-input:is(input[aria-disabled="true"]):not(:checked),
    input.is-disabled:not(:checked) %toggle-input {

        ~ %toggle-marker {
            @extend %toggle--radio-marker--disabled;
        }

    }

}

%toggle--switch {
    position: relative;
    width: $toggle_slot_width;

    &::before { // Slot
        content: "";

        position: absolute;
        top: 0;
        left: 1px;

        display: block;
        width: 100%;
        height: 100%;

        background: url(get-svg-data-url($toggle_slot_image)) center center no-repeat;
    }

    &-marker {
        box-shadow: none;
        margin: 0;
        left: 0;

        width: ($toggle_size + 2);
        height: ($toggle_size + 2);

        pointer-events: none;

        transition-timing-function: ease-in-out;

        @include state-styles($toggle_states--switch);
    }

    &-input {

        &:not([disabled], [aria-disabled="true"]):hover ~ %toggle-marker {
            @include state-styles($toggle_states--switch, hover);
        }

        &:not([disabled], [aria-disabled="true"]):focus-visible ~ %toggle-marker {
            @include state-styles($toggle_states--switch, focus);
        }

        &[disabled] ~ %toggle-marker,
        &[aria-disabled="true"] ~ %toggle-marker,
        .is-disabled & ~ %toggle-marker {
            @include state-styles($toggle_states--switch, disabled);
        }

        [data-invalid="false"] & ~ %toggle-marker,
        &[data-invalid="false"] ~ %toggle-marker,
        &--valid ~ %toggle-marker {
            @include state-styles($toggle_states--switch, valid);
        }

        [data-invalid="true"] & ~ %toggle-marker,
        &[data-invalid="true"] ~ %toggle-marker,
        &--invalid ~ %toggle-marker {
            @include state-styles($toggle_states--switch, invalid);
        }

        //***** Checked *****//

        &:checked ~ %toggle-marker {
            left: ($toggle_slot_width - $toggle_size);
            @include state-styles($toggle_states--switch--checked);
        }

        &:checked:not([disabled], [aria-disabled="true"]):hover ~ %toggle-marker {
            @include state-styles($toggle_states--switch--checked, hover);
        }

        &:checked:not([disabled], [aria-disabled="true"]):focus-visible ~ %toggle-marker {
            @include state-styles($toggle_states--switch--checked, focus);
        }

        &:checked[disabled] ~ %toggle-marker,
        &:checked[aria-disabled="true"] ~ %toggle-marker {
            @include state-styles($toggle_states--switch--checked, disabled);
        }

        [data-invalid="false"] &:checked ~ %toggle-marker,
        &[data-invalid="false"]:checked ~ %toggle-marker,
        &--valid:checked ~ %toggle-marker {
            @include state-styles($toggle_states--switch--checked, valid);
        }

        [data-invalid="true"] &:checked ~ %toggle-marker,
        &:checked[data-invalid="true"] ~ %toggle-marker,
        &--invalid:checked ~ %toggle-marker {
            @include state-styles($toggle_states--switch--checked, invalid);
        }

    }

    %toggle-marker {
        @extend %toggle--switch-marker;
    }

    %toggle-input {
        @extend %toggle--switch-input;
    }


}

.toggle {
    @extend %toggle;

    &-input {
        @extend %toggle-input;
    }

    &-marker {
        @extend %toggle-marker;
    }

    &.is-checkbox {
        @extend %toggle--checkbox;
    }

    &.is-radio {
        @extend %toggle--radio;
    }

    &.is-switch {
        @extend %toggle--switch;
    }

}