/* SWITCH COMPONENT */

/* Default Styling */
label:has(input[type="checkbox"][role="switch"], 
input[type="checkbox"][role="switch"]) {
    --_switch-w: 4.4em;
    --_switch-h: 2.4em;
    --_switch-round: 100vmax;
    --_switch-default-bg: var(--muted-secondary);
    --_switch-focus-outline: var();
    --_switch-color: var(--foreground-secondary);
    --_switch-slider-color: whitesmoke;

    /* GLOBAL */
    --spacing: var(--md);

    //margin: var(--spacing);
}

/* Hiding it to achieve the toggle effect */
input[type="checkbox"][role="switch"] {
    appearance: none;

    width: var(--_switch-w);
    height: var(--_switch-h);
    border-radius: var(--_switch-round);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--_switch-color);

    transition:
            transform .24s ease-in,
            opacity .4s ease-out,
            background-color .8s cubic-bezier(0.19, 1, 0.22, 1);

    &::after {

        content: "";
        background-color: var(--_switch-slider-color);
        aspect-ratio: 1 / 1;
        height: 80%;
        position: absolute;
        top: 10%;
        left: 5%;
        border-radius: 50%;
        transition:
            transform .24s ease-in,
            opacity .4s ease-out,
            background-color .8s cubic-bezier(0.19, 1, 0.22, 1);
    }

}

/* Common styling between switches */
input[type="checkbox"][role="switch"] {
    width: var(--_switch-w);
}

input[type="checkbox"][role="switch"]:focus {
    outline: var(--accent) .2rem solid;
    outline-offset: 0.18rem;
}

/* Change Switch background when checked */
input[role="switch"][type="checkbox"]:checked {
    --_switch-color: var(--primary);
}

input[role="switch"][type="checkbox"]:checked:not(:is(.squished, .squared)) {
    background-color: var(--primary);

    &::after {
        transform: translateX(120%);
    }
}

/* SWITCH VARIATIONS */

/* Squished Variation */
input[type="checkbox"][role="switch"].squished {

    --_switch-h: .8em;

    height: var(--_switch-h);
    width: var(--_switch-w);
    border-radius: var(--_switch-round);
    background-color: var(--foreground-secondary);
    position: relative;
    overflow: visible;
    padding: 0;

    &::after {
        content: "";
        background-color: var(--_switch-slider-color);
        height: 250%;
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 50%;
        left: -2.5%;
        transform: translateY(-50%);
        border-radius: inherit;
        transition:
            transform 0.24s ease-in,
            opacity 0.4s ease-out,
            background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    }
}

/* Change Switch background when checked */
input[role="switch"][type="checkbox"].squished:checked {
    background-color: var(--primary);

    &::after {

       transform: translate(252.5%, -50%);
    }
}

/* Squared Variation */
input[type="checkbox"][role="switch"].squared {
    /* Add specific styles for squared variation */
    width: var(--_switch-w);
    height: var(--_switch-h);
    border-radius: 0;
    background-color: var(--foreground-secondary);
    position: relative;
    //border: 0.2rem solid var(--text);

    &::after {
        content: "";
        background-color: var(--_switch-slider-color);
        aspect-ratio: 1 / 1;
        height: 80%;
        position: absolute;
        top: 10%;
        left: 5%;
        border-radius: 0;
        transition:
            transform 0.24s ease-in,
            opacity 0.4s ease-out,
            background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    }
}

/* Change Switch background when checked */
input[role="switch"][type="checkbox"].squared:checked {
    background-color: var(--primary);

    &::after {
        transform: translateX(120%);
    }
}