.Checkbox{border-radius:var(--radius-md);background:var(--color-white);cursor:pointer;-webkit-user-select:none;user-select:none;--accent-color:unset;--accent-hover-color:unset;--border-width:1px;--border-color:var(--color-border-input);--mark-color:var(--color-white);justify-content:center;align-items:center;width:20px;height:20px;transition:all .1s ease-in-out;display:flex;position:relative}.Checkbox svg{z-index:1;width:12px;height:12px;transition:all .1s ease-in-out;position:relative}.Checkbox svg [fill]{fill:var(--mark-color)}.Checkbox svg [stroke]{stroke:var(--mark-color)}.Checkbox:before{content:"";border-radius:inherit;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);z-index:2;transition:all .1s ease-in-out;display:block;position:absolute;inset:0}.Checkbox[data-checked=true]{background-color:var(--accent-color);--border-color:var(--accent-color)}.Checkbox[data-checked=false] svg{opacity:0}.Checkbox[data-has-error=true]{--accent-color:var(--color-red-600);--border-color:var(--color-red-600)}.Checkbox[data-has-error=false]{--accent-color:var(--color-blue-600)}.Checkbox[data-disabled=true]{background:var(--color-grey-50);cursor:default;pointer-events:none;--accent-color:var(--color-grey-50);--border-color:var(--color-grey-100);--mark-color:var(--color-grey-400)}.Checkbox:focus-within{--border-width:2px;--border-color:var(--color-blue-600);box-shadow:0 0 0 3px color-mix(in oklab, var(--color-blue) 40%, transparent)}label:hover .Checkbox[data-disabled=false]{--border-width:2px}