.checkbox{--checkbox-icon-color:var(--clr-neutral-900);--checkbox-selected-icon-color:var(--clr-neutral-100);--checkbox-color:var(--clr-neutral-100);--checkbox-selected-color:var(--clr-blue-400);--_checkbox-radius:0.5em;--checkbox-size:1.8em;--checkbox-color-transition-duration:100ms;--checkbox-icon-transition-duration:300ms;--checkbox-focus-transition-duration:75ms;--checkbox-stroke-dashoffset:50;--checkbox-stroke-dasharray:50;display:inline-grid;grid-template-areas:"pile";align-items:center;justify-items:center}.checkbox>*{grid-area:pile}.checkbox input[type=checkbox]{appearance:none;margin:0;background-color:var(--clr-neutral-100);color:inherit;cursor:pointer;display:inline-block;border:2px solid hsl(from currentcolor h s l/.6);border-radius:var(--_checkbox-radius);height:var(--checkbox-size);aspect-ratio:1;transition:border-color var(--checkbox-color-transition-duration) ease,background-color var(--checkbox-color-transition-duration) ease,box-shadow var(--checkbox-focus-transition-duration) ease-in-out}.checkbox input[type=checkbox]:hover{border-color:hsl(from currentColor h s l/1)}.checkbox input[type=checkbox]:checked,.checkbox input[type=checkbox][data-partial-checked=true]{background-color:var(--checkbox-selected-color);border-color:var(--checkbox-selected-color)}.checkbox input[type=checkbox]:checked+.checked-icon,.checkbox input[type=checkbox][data-partial-checked=true]~.partial-checked-icon{animation:svgStrokeAnimation .3s ease-in-out forwards}.checkbox input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 .4em var(--clr-blue-400)}.checkbox input[type=checkbox]:disabled{background-color:var(--clr-neutral-300);border-color:var(--clr-neutral-700);cursor:not-allowed}.checkbox[data-rounded=true]{--_checkbox-radius:50%}.checkbox .checked-icon,.checkbox .partial-checked-icon{stroke-dasharray:var(--checkbox-stroke-dasharray);stroke-dashoffset:var(--checkbox-stroke-dashoffset)}.checkbox__icon{width:calc(var(--checkbox-size)*.5);aspect-ratio:1;pointer-events:none;color:var(--clr-neutral-100)}@keyframes svgStrokeAnimation{0%{stroke-dashoffset:var(--checkbox-stroke-dashoffset)}to{stroke-dashoffset:0}}