/* 
`readonly` state on checkboxes is not something that exists in Mantine.
So we are allowing ourselves some custom style to achieve the desired effect
*/
.input {
    @mixin light {
        /* targets the default checkbox without overiding mantine's base rules */
        &:not([data-indeterminate], :checked, [readonly], :disabled, [data-error='true']) {
            border-color: var(--coveo-color-input-border);
        }

        /* mantine doesn't have a concept of readonly checkbox */
        &[readonly] {
            border-color: var(--mantine-color-default-border);
            background-color: var(--coveo-color-bg-readonly);
            color: var(--coveo-color-text-readonly);

            & + .icon {
                color: var(--coveo-color-text-readonly);
            }
        }

        &:disabled {
            border-color: var(--mantine-color-default-border);
        }
    }
}

.labelWrapper {
    @mixin light {
        &[data-disabled] {
            .label,
            .description {
                color: var(--mantine-color-disabled-color);
            }
        }
    }

    --label-offset-start: 8px;
}