/* Checkbox */

input[type="checkbox"]:not(.switch) {
    width: var(--size-checkbox);
    height: var(--size-checkbox);
    aspect-ratio: 1/1;
    appearance: none;  /* Remove browser default styles */
    border: var(--border-checkbox);
    border-radius: var(--radius-checkbox);
    color: var(--color-checkbox-text);
    background: var(--color-checkbox);
    box-shadow: inset 0 0 0 0 transparent, var(--shadow-form);
    /* Centre the checkmark */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;  /* a11y */
}

input[type="checkbox"]:not(.switch):hover {
    box-shadow: inset 0 0 0 0 transparent, var(--shadow-form-hover);
    border: var(--border-checkbox-hover);
    background: var(--color-checkbox-hover);
    color: var(--color-checkbox-hover-text);
}

input[type="checkbox"]:not(.switch):checked {
    /* Box shadows are shown when printed */
    box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-checkbox-active), var(--shadow-form-checked);
    border: var(--border-checkbox-checked);
    color: var(--color-checkbox-active-text);
}

input[type="checkbox"]:not(.switch):checked:hover {
    box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-checkbox-active-hover), var(--shadow-form-checked-hover);
    border: var(--border-checkbox-checked-hover);
    color: var(--color-checkbox-active-hover-text);
}

input[type="checkbox"]:not(.switch):indeterminate {
    /* Box shadows are shown when printed */
    box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-checkbox-indeterminate), var(--shadow-form-indeterminate);
    border: var(--border-checkbox-indeterminate);
    color: var(--color-checkbox-indeterminate-text);
}

input[type="checkbox"]:not(.switch):indeterminate:hover {
    box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-checkbox-indeterminate-hover), var(--shadow-form-indeterminate-hover);
    border: var(--border-checkbox-indeterminate-hover);
    color: var(--color-checkbox-active-hover-text);
}

input[type="checkbox"]:not(.switch):indeterminate:hover::after {
    background: var(--color-checkbox-indeterminate-hover-text);
}

input[type="checkbox"]:not(.switch):indeterminate::after {
    /* Position directly on top of the checkbox */
    position: absolute;
    width: var(--size-checkbox);
    height: var(--size-checkbox);
    content: "";
    background: var(--color-checkbox-indeterminate-text);
    /* Display the checkmark */
    -webkit-mask: url("./icons/checkbox-indeterminate.svg");
    mask: url("./icons/checkbox-indeterminate.svg");
}

input[type="checkbox"]:not(.switch):checked::after {
    /* Position directly on top of the checkbox */
    position: absolute;
    width: var(--size-checkbox);
    height: var(--size-checkbox);
    content: "";
    background: var(--color-checkbox-active-text);
    /* Display the checkmark */
    -webkit-mask: url("./icons/checkbox.svg");
    mask: url("./icons/checkbox.svg");
}

input[type="checkbox"]:not(.switch):checked:hover::after {
    background: var(--color-checkbox-active-hover-text);
}

label:has(input[type="checkbox"]) {
    display: inline-flex;  /* So they are aligned */
    gap: var(--gap-label-checkbox);
    align-items: center;
    cursor: pointer;  /* a11y */
}

/* Radio */

input[type="radio"]:not(.switch) {
    width: var(--size-checkbox);
    height: var(--size-checkbox);
    aspect-ratio: 1/1;
    appearance: none;  /* Remove browser default styles */
    border: var(--border-radio);
    border-radius: var(--radius-radio);
    color: var(--color-radio-text);
    background: var(--color-radio);
    box-shadow: inset 0 0 0 0 transparent, var(--shadow-form);
    /* Centre the checkmark */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;  /* a11y */
}

input[type="radio"]:not(.switch):hover {
    box-shadow: inset 0 0 0 0 transparent, var(--shadow-form-hover);
    border: var(--border-radio-hover);
    background: var(--color-radio-hover);
    color: var(--color-radio-hover-text);
}

input[type="radio"]:not(.switch):checked {
    /* Box shadows are shown when printed */
    box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-radio-active), var(--shadow-form-checked);
    border: var(--border-radio-checked);
    color: var(--color-radio-active-text);
}

input[type="radio"]:not(.switch):checked:hover {
    box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-radio-active-hover), var(--shadow-form-checked-hover);
    border: var(--border-checkbox-checked-hover);
    color: var(--color-radio-active-hover-text);
}

input[type="radio"]:not(.switch):checked:hover::after {
    background: var(--color-radio-active-hover-text);
}

input[type="radio"]:not(.switch):checked::after {
    /* Position directly on top of the checkbox */
    position: absolute;
    width: var(--size-checkbox);
    height: var(--size-checkbox);
    content: "";
    background: var(--color-radio-active-text);
    /* Display the checkmark */
    -webkit-mask: url("./icons/radio.svg");
    mask: url("./icons/radio.svg");
}

label:has(input[type="radio"]) {
    display: inline-flex;  /* So they are aligned */
    gap: var(--gap-label-checkbox);
    align-items: center;
    cursor: pointer;  /* a11y */
}

/* Checkbox - switch style */

:is(input[type="checkbox"], input[type=radio]).switch {
    appearance: none;
    width: var(--width-switch);
    height: var(--height-switch);
    background: var(--color-switch);
    border-radius: var(--radius-switch);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

:is(input[type="checkbox"], input[type=radio]).switch:checked {
    background: var(--color-switch-on);
    border-radius: var(--radius-switch);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

:is(input[type="checkbox"], input[type=radio]).switch::after {
    background: var(--color-switch-thumb);
    box-shadow: var(--shadow-switch-thumb);
    content: "";
    width: var(--width-switch-thumb);
    height: var(--height-switch-thumb);
    border-radius: var(--radius-switch-thumb);
    transform: translateX(calc(var(--padding-switch-thumb)));
}

:is(input[type="checkbox"], input[type=radio]).switch:checked::after {
    background-color: var(--color-switch-thumb-on);
    box-shadow: var(--shadow-switch-thumb-on);
    border: var(--border-switch-thumb-on);
    transform: translateX(calc(var(--width-switch) - var(--width-switch-thumb-on) - var(--padding-switch-thumb-on)));
    border-radius: var(--radius-switch-thumb-on);
}

:is(input[type="checkbox"], input[type=radio]).switch:hover {
    background-color: var(--color-switch-hover);
    box-shadow: var(--shadow-switch-hover);
    border: var(--border-switch-hover);
}

:is(input[type="checkbox"], input[type=radio]).switch:hover::after {
    background-color: var(--color-switch-thumb-hover);
    box-shadow: var(--shadow-switch-thumb-hover);
    border: var(--border-switch-thumb-hover);
    width: var(--width-switch-thumb-hover);
    height: var(--height-switch-thumb-hover);
}

:is(input[type="checkbox"], input[type=radio]).switch:checked:hover {
    background-color: var(--color-switch-on-hover);
    box-shadow: var(--shadow-switch-on-hover);
    border: var(--border-switch-on-hover);
}

:is(input[type="checkbox"], input[type=radio]).switch:checked:hover::after {
    background-color: var(--color-switch-thumb-on-hover);
    box-shadow: var(--shadow-switch-thumb-on-hover);
    border: var(--border-switch-thumb-on-hover);
    width: var(--width-switch-thumb-on-hover);
    height: var(--height-switch-thumb-on-hover);
}