input[type=checkbox] {
    position: relative;
    margin: 0;
}

input[type=checkbox]:not(:disabled)::before {
    cursor: pointer;
}


/* 1. Browser Default
-------------------------------------------- */
/* input[type=checkbox] {
    cursor: pointer;
    margin: var(--checkbox-padding);
}

input[type=checkbox]:focus-visible {
    outline: var(--outline);
    outline-offset: var(--outline-outset);
} */


/* 2. Checkbox icon replacement
-------------------------------------------- */
input[type=checkbox] {
    appearance: none;
    padding: var(--checkbox-padding);
    font-family: var(--font-family--icon);
    font-size: var(--checkbox-icon-size);
}

input[type=checkbox]:focus-visible {
    outline: 0;
}

input[type=checkbox]:focus-visible::before {
    outline: var(--outline);
    outline-offset: var(--outline-outset);
}

input[type=checkbox]::before {
    content: var(--checkbox-icon-checkbox);
    color:  var(--checkbox-icon-color);
    background: var(--checkbox-background-color);
    border-radius: var(--checkbox-icon-border-radius);
}

input[type=checkbox]:hover::before {
    color: var(--checkbox-icon-color--hover);
    background: var(--checkbox-background-color--hover);
}

input[type=checkbox]:focus::before {
    color: var(--checkbox-icon-color--focus);
    background: var(--checkbox-background-color--focus);
}

input[type=checkbox]:checked::before {
    content: var(--checkbox-icon-checkbox-checked);
    color: var(--checkbox-icon-color--checked);
    background: var(--checkbox-background-color--checked);
}

input[type=checkbox]:checked:hover::before {
    color: var(--checkbox-icon-color--checked--hover);
    background: var(--checkbox-background-color--checked--hover);
}

input[type=checkbox]:checked:focus::before {
    color: var(--checkbox-icon-color--checked--focus);
    background: var(--checkbox-background-color--checked--focus);
}


/* 3. Checkbox Custom (toggle)
-------------------------------------------- */
/* input[type=checkbox] {
    appearance: none;
    padding: var(--checkbox-padding);
    width: calc(var(--checkbox-toggle-width) + var(--checkbox-padding-start) + var(--checkbox-padding-end));
    height: calc(var(--checkbox-toggle-height) + var(--checkbox-padding-top) + var(--checkbox-padding-bottom));
}

input[type=checkbox]:focus-visible {
    outline: 0;
}

input[type=checkbox]:focus-visible::before {
    outline: var(--outline);
    outline-offset: var(--outline-outset);
}

input[type=checkbox]::before {
    position: absolute;
    content: '';
    width: var(--checkbox-toggle-width);
    height: var(--checkbox-toggle-height);
    border-width: var(--checkbox-toggle-border-width);
    border-style: var(--checkbox-toggle-border-style);
    border-color: var(--checkbox-toggle-border-color);
    border-radius: var(--checkbox-toggle-border-radius);
    background-color: var(--checkbox-toggle-background-color);
}

input[type=checkbox]::after {
    position: absolute;
    content: '';
    width: var(--checkbox-toggle-checkmark-width);
    height: var(--checkbox-toggle-checkmark-height);
    border-radius: var(--checkbox-toggle-checkmark-border-radius);
    background-color: var(--checkbox-toggle-checkmark-background-color);
    transform: translate(   calc((var(--checkbox-toggle-height) - var(--checkbox-toggle-checkmark-width)) / 2 ),
                            calc((var(--checkbox-toggle-height) - var(--checkbox-toggle-checkmark-height)) / 2 ));
    transition-property: transform;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
}

input[type=checkbox]:not(:disabled):hover::before {
    border-color: var(--checkbox-toggle-border-color--hover);
    background-color: var(--checkbox-toggle-background-color--hover);
}

input[type=checkbox]:not(:disabled):hover::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--hover);
}

input[type=checkbox]:focus::before {
    border-color: var(--checkbox-toggle-border-color--focus);
    background-color: var(--checkbox-toggle-background-color--focus);
}

input[type=checkbox]:focus::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--focus);
}

input[type=checkbox]:checked::before {
    border-color: var(--checkbox-toggle-border-color--checked);
    background-color: var(--checkbox-toggle-background-color--checked);
}

input[type=checkbox]:checked::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--checked);
    transform: translate(   calc(var(--checkbox-toggle-width) - (var(--checkbox-toggle-border-width) + var(--checkbox-toggle-checkmark-width) + var(--checkbox-toggle-checkmark-gap))),
                            calc((var(--checkbox-toggle-height) - var(--checkbox-toggle-checkmark-height)) / 2));
}

input[type=checkbox]:not(:disabled):checked:hover::before {
    border-color: var(--checkbox-toggle-border-color--checked--hover);
    background-color: var(--checkbox-toggle-background-color--checked--hover);
}

input[type=checkbox]:not(:disabled):checked:hover::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--checked--hover);
}

input[type=checkbox]:checked:focus::before {
    border-color: var(--checkbox-toggle-border-color--checked--focus);
    background-color: var(--checkbox-toggle-background-color--checked--focus);
}

input[type=checkbox]:checked:focus::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--checked--focus);
} */