/*
 * <x-checkbox>: M3's checkbox (resources/views/components/checkbox.blade.php), on the row the
 * selection controls share (components/selection.css).
 *
 * CheckboxTokens (androidx Compose Material 3, Apache-2.0): an 18px box with a 2px on-surface-variant
 * outline and 2px corners, filled with primary and holding an on-primary tick (or dash, for the
 * mixed state) at the 18px icon size once it is ticked; the state layer a 40px circle around it,
 * 11px past each edge. The tick grows in and fades in on the fast spatial spring. With the server's
 * error the outline, the fill and the state layer are error and the tick on-error. Disabled, the
 * outline and the fill are on-surface at 38% and the tick is surface. Beside a hint the box drops
 * 3px, to sit on the label's first line.
 *
 *   [data-md-checkbox]              the root: the row and its errors; `class` and `style` land here
 *     [data-md-selection-row]
 *       [data-md-checkbox-box]      the box: input, [data-md-checkbox-check], [data-md-checkbox-mixed]
 *     [data-md-selection-support]   the errors, 4px under the row
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './selection.css';
@import './icon.css';

@layer material.components {
    [data-md-checkbox] {
        min-width: 0;
    }

    [data-md-checkbox-box] {
        position: relative;
        display: grid;
        flex: none;
        place-items: center;
        width: 18px;
        height: 18px;
    }

    [data-md-checkbox-box] > * {
        grid-area: 1 / 1;
    }

    [data-md-selection-row]:has([data-md-selection-hint]) [data-md-checkbox-box] {
        margin-top: 3px;
    }

    [data-md-checkbox-box]::before {
        inset: -11px;
    }

    [data-md-checkbox-box]:has(input:focus-visible)::before {
        outline: 3px solid var(--md-sys-color-secondary);
    }

    [data-md-checkbox-box] input {
        width: 18px;
        height: 18px;
        border: 2px solid var(--md-sys-color-on-surface-variant);
        border-radius: 2px;
    }

    [data-md-checkbox-box] input:is(:checked, :indeterminate) {
        border-color: var(--md-sys-color-primary);
        background-color: var(--md-sys-color-primary);
    }

    [data-md-checkbox-box] :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
        color: var(--md-sys-color-on-primary);
        opacity: 0;
        scale: 0.5;
        pointer-events: none;
        transition-property: opacity, scale;
        transition-duration: var(--md-sys-motion-spatial-fast-duration);
        transition-timing-function: var(--md-sys-motion-spatial-fast);
    }

    [data-md-checkbox-box] input:checked:not(:indeterminate) ~ [data-md-checkbox-check],
    [data-md-checkbox-box] input:indeterminate ~ [data-md-checkbox-mixed] {
        opacity: 1;
        scale: 1;
    }

    [data-md-selection-row][data-md-invalid] [data-md-checkbox-box] input {
        border-color: var(--md-sys-color-error);
    }

    [data-md-selection-row][data-md-invalid] [data-md-checkbox-box] input:is(:checked, :indeterminate) {
        background-color: var(--md-sys-color-error);
    }

    [data-md-selection-row][data-md-invalid] [data-md-checkbox-box] :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
        color: var(--md-sys-color-on-error);
    }

    [data-md-checkbox-box] input:disabled {
        border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
    }

    [data-md-checkbox-box] input:disabled:is(:checked, :indeterminate) {
        border-color: transparent;
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
    }

    [data-md-checkbox-box] input:disabled ~ :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
        color: var(--md-sys-color-surface);
    }

    [data-md-checkbox] [data-md-selection-support] {
        margin-top: var(--md-sys-measurement-space50);
        color: var(--md-sys-color-error);
        font: var(--md-sys-typescale-body-sm);
        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
        font-variation-settings: normal;
    }
}