/* Manifest Checkboxes */

@layer base, components, utilities;

@layer components {

    /* Deliberately unflattened: manifest.input.css supplies the field chrome via
       a lower-specificity rule that sorts later, so this must outrank it. */
    input[type=checkbox]:not([role=switch], .unstyle) {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        max-width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        padding: 0;
        border-radius: 0.4rem;
        cursor: pointer;

        /* Checked */
        &:checked {

            &:hover {
                background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
                border-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
            }

            &:active {
                background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
                border-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
            }
        }

        /* Icon */
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background-color: var(--color-field-inverse, oklch(43.9% 0 0));
            mask-image: var(--icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
            mask-repeat: no-repeat;
            mask-size: 100% 100%;
            transform-origin: center;
            transition: var(--transition, all .05s ease-in-out);

            /* Icon unchecked */
            opacity: 0;
            transform: translateX(-50%) translateY(-50%) scale(0)
        }

        /* Icon checked */
        &:checked::after {
            opacity: 1;
            transform: translateX(-50%) translateY(-50%) scale(1)
        }
    }
}