/* Indux Checkboxes */

@layer components {

    input[type=checkbox]:not([role=switch]) {
        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, oklch(89.24% 0.0024 12.48));
                border-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }

            &:active {
                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
                border-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }
        }

        /* Icon */
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
            -webkit-mask-image: var(--icon-checkbox,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-image: var(--icon-checkbox, 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"));
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100% 100%;
            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)
        }
    }
}