@layer components{:root{--checkbox-size:1rem;--checkbox-radius:var(--radius-sm);--checkbox-bg:transparent;--checkbox-border:var(--color-gray-500);--checkbox-checked-bg:var(--color-brand);--checkbox-checked-text:var(--color-white);--checkbox-error-border:var(--color-error-500);--checkbox-indicator-size:calc(var(--checkbox-size) - 4px)}:where(.checkbox){width:var(--checkbox-size);height:var(--checkbox-size);border-radius:var(--checkbox-radius);border:2px solid var(--checkbox-border);background-color:var(--checkbox-bg);cursor:pointer;transition:var(--transition-default);outline:none;flex-shrink:0;place-items:center;display:grid}:where(.checkbox)[data-state=checked],:where(.checkbox)[data-state=indeterminate]{background-color:var(--checkbox-checked-bg);border-color:var(--checkbox-checked-bg);color:var(--checkbox-checked-text)}:where(.checkbox)[aria-invalid=true]{border-color:var(--checkbox-error-border);--checkbox-checked-bg:var(--checkbox-error-border)}:where(.checkbox):focus-visible{outline:2px solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}:where(.checkbox):disabled,:where(.checkbox):disabled+:where(.label){cursor:not-allowed;opacity:var(--disabled-opacity)}:where(.checkbox-indicator){color:currentColor;font-size:var(--checkbox-indicator-size)}}