/* Case — composant canonique ; son emploi : canon_check.md. */

@layer components {
    .check-label {
        display: inline-flex;
        align-items: center;
        gap: var(--canon-space-2);
    }
    .check {
        flex: none;
        display: inline-grid;
        place-content: center;
        width: var(--check-side, 1.125em);
        aspect-ratio: 1;
    }
    .check::before {
        width: 0.3em;
        height: 0.6em;
        visibility: hidden;
        transform: translateY(-10%) rotate(45deg);
    }
    .check[type="radio"]::before {
        width: 0;
        height: 0;
        transform: none;
    }
    .check:checked::before {
        visibility: visible;
    }
    .check:indeterminate::before {
        width: 0.55em;
        height: 0;
        visibility: visible;
        transform: none;
    }

    .check {
        appearance: none;
        border: var(--canon-line-width) solid var(--canon-theme-control-boundary);
        border-radius: var(--canon-radius-control);
        background-color: var(--canon-theme-field);
    }
    .check[type="radio"] {
        border-radius: var(--canon-radius-pill);
    }
    .check:checked,
    .check:indeterminate {
        border-color: var(--canon-theme-action);
        background-color: var(--canon-theme-action);
    }
    .check:hover {
        border-color: var(--canon-theme-ink);
    }
    .check:checked:hover,
    .check:indeterminate:hover {
        border-color: var(--canon-theme-action-hover);
        background-color: var(--canon-theme-action-hover);
    }
    .check:disabled {
        border-color: var(--canon-theme-line);
        background-color: var(--canon-theme-disabled);
    }
    .check[aria-invalid="true"] {
        border-color: var(--canon-theme-danger);
    }
    .check::before {
        border-block-end: 2px solid currentColor;
        border-inline-end: 2px solid currentColor;
    }
    .check[type="radio"]::before {
        border: 0.25em solid currentColor;
        border-radius: var(--canon-radius-pill);
    }
    .check:indeterminate::before {
        border-inline-end: 0;
    }
    @media (forced-colors: active) {
        .check {
            appearance: auto;
        }
    }

    .check {
        color: var(--canon-theme-on-action);
    }
    .check::before {
        content: "";
    }
    @media (forced-colors: active) {
        .check::before {
            content: none;
        }
    }

    .check-label,
    .check {
        cursor: pointer;
    }
    .check {
        transition: border-color var(--canon-duration-state), background-color var(--canon-duration-state);
    }
    .check:disabled {
        cursor: default;
    }
}