@layer components{.checkbox{appearance:none;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--background);cursor:pointer;flex-shrink:0;width:1.125rem;height:1.125rem;margin:0;transition:background-color .15s,border-color .15s;position:relative;&:checked{background-color:var(--primary);border-color:var(--primary);&:after{content:"";border:solid var(--primary-foreground);border-width:0 2px 2px 0;width:6px;height:10px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}}&:indeterminate{background-color:var(--primary);border-color:var(--primary);&:after{content:"";background:var(--primary-foreground);border:none;width:10px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}&:focus-visible{outline:2px solid var(--ring);outline-offset:2px}&:disabled{background-color:var(--muted);border-color:color-mix(in oklch, var(--muted-foreground) 50%, var(--background));cursor:not-allowed;&:is(:checked,:indeterminate){background-color:color-mix(in oklch, var(--primary) 45%, var(--background));border-color:#0000}}&:is([aria-invalid=true],:user-invalid:not(form[data-validate=submit]:not([data-submitted]) *)){border-color:var(--destructive)}}.checkbox-item{align-items:center;gap:.5rem;display:flex;&>label{cursor:pointer;font-size:.875rem;line-height:1}}.checkbox-item-block{align-items:flex-start;gap:.5rem;display:flex;&>label{cursor:pointer;font-size:.875rem}&>.checkbox{margin-top:.125rem}}:is(.checkbox-item,.checkbox-item-block)>.checkbox:before{content:"";position:absolute;inset-block:-.25rem;inset-inline:-.25rem -.5rem}.checkbox-item:has(.checkbox:disabled),.checkbox-item-block:has(.checkbox:disabled){cursor:not-allowed;& label{color:var(--muted-foreground);cursor:not-allowed}}@media (prefers-reduced-motion:reduce){.checkbox{transition:none}}@media (prefers-contrast:more){.checkbox{border-width:2px}.checkbox:disabled{border-color:var(--muted-foreground)}}@media (forced-colors:active){.checkbox{appearance:auto}}}