@layer components{.checkbox-field{--checkbox-field-size:var(--c-checkbox-field-size,var(--s-size-checkbox));--checkbox-field-radius:var(--c-checkbox-field-radius,var(--s-radius-checkbox));--checkbox-field-border-width:var(--c-checkbox-field-border-width,var(--s-border-width-default));--checkbox-field-border-color:var(--c-checkbox-field-border-color,var(--s-color-border-default));--checkbox-field-bg:var(--c-checkbox-field-bg,var(--s-color-surface-default));--checkbox-field-checkmark-color:var(--c-checkbox-field-checkmark-color,var(--s-color-surface-default));align-items:center;display:inline-flex;& .label{inline-size:var(--checkbox-field-size);block-size:var(--checkbox-field-size);cursor:pointer;margin:0;padding:0;display:inline-block;position:relative;&[aria-disabled=true]{cursor:default}&:hover .input:not([disabled]):not([aria-invalid=true]):not(:invalid)+.icon{--checkbox-field-border-color:var(--c-checkbox-field-border-color-hover,var(--s-color-border-hover))}}& .input{opacity:0;cursor:pointer;block-size:100%;inline-size:100%;margin:0;padding:0;position:absolute;top:0;bottom:0;left:0;right:0;&[disabled]{cursor:default;&+.icon{cursor:default;--checkbox-field-border-color:var(--c-checkbox-field-border-color-disabled,var(--s-color-border-inactive));--checkbox-field-bg:var(--c-checkbox-field-bg-disabled,var(--s-color-surface-inactive));&:after{--checkbox-field-checkmark-color:var(--c-checkbox-field-checkmark-color-disabled,var(--s-color-border-inactive));border-color:var(--checkbox-field-checkmark-color);background-color:var(--checkbox-field-checkmark-color)}}&:checked+.icon{--checkbox-field-border-color:var(--c-checkbox-field-border-color-disabled,var(--s-color-border-inactive));--checkbox-field-bg:var(--c-checkbox-field-bg-disabled-checked,var(--s-color-border-inactive));&:after{--checkbox-field-checkmark-color:var(--c-checkbox-field-checkmark-color-disabled-checked,var(--s-color-surface-inactive));border-color:var(--checkbox-field-checkmark-color);background-color:var(--s-color-border-inactive);opacity:1}}}&:focus-visible+.icon{--checkbox-field-border-color:var(--c-checkbox-field-border-color-focus,var(--s-color-border-focus))}&:active:not([disabled]):not([aria-invalid=true]):not(:invalid)+.icon{--checkbox-field-border-color:var(--c-checkbox-field-border-color-active,var(--s-color-border-active))}&:checked+.icon{--checkbox-field-border-color:var(--c-checkbox-field-border-color-checked,var(--s-color-border-active));--checkbox-field-bg:var(--c-checkbox-field-bg-checked,var(--s-color-border-active));&:after{opacity:1;rotate:45deg;scale:1}}&:indeterminate+.icon{--checkbox-field-border-color:var(--c-checkbox-field-border-color-checked,var(--s-color-border-active));--checkbox-field-bg:var(--c-checkbox-field-bg,var(--s-color-surface-default));&:after{background-color:var(--s-color-border-active);opacity:1;border:none;block-size:2px;inline-size:12px;top:8.5px;rotate:0deg;scale:1}&:dir(ltr):after{left:3px}&:dir(rtl):after{right:3px}}&:invalid+.icon,&[aria-invalid=true]+.icon{--checkbox-field-border-color:var(--c-checkbox-field-border-color-error,var(--s-color-border-error));--checkbox-field-bg:var(--c-checkbox-field-bg-error,var(--s-color-surface-error-light));&:after{--checkbox-field-checkmark-color:var(--c-checkbox-field-checkmark-color-error,var(--s-color-border-error));border-color:var(--checkbox-field-checkmark-color);background-color:var(--checkbox-field-checkmark-color)}}&:invalid:checked+.icon,&[aria-invalid=true]:checked+.icon{--checkbox-field-border-color:var(--c-checkbox-field-border-color-error,var(--s-color-border-error));--checkbox-field-bg:var(--c-checkbox-field-bg-error-checked,var(--s-color-border-error));&:after{--checkbox-field-checkmark-color:var(--c-checkbox-field-checkmark-color-error-checked,var(--s-color-surface-default));border-color:var(--checkbox-field-checkmark-color);opacity:1;background-color:#0000}}}& .icon{inline-size:var(--checkbox-field-size);block-size:var(--checkbox-field-size);border:var(--checkbox-field-border-width) solid var(--checkbox-field-border-color);border-radius:var(--checkbox-field-radius);background-color:var(--checkbox-field-bg);-webkit-margin-end:var(--s-spacing-2);margin-inline-end:var(--s-spacing-2);transition:border-color .2s,background-color .2s;display:inline-block;position:absolute;top:0}& .icon:dir(ltr){left:0}& .icon:dir(rtl){right:0}& .icon{&:after{content:"";border:solid var(--checkbox-field-checkmark-color);opacity:0;border-width:0 2px 2px 0;block-size:12px;inline-size:6px;transition:opacity .2s,scale .2s;display:block;position:absolute;top:1px;rotate:45deg;scale:.8}&:dir(ltr):after{left:5.75px}&:dir(rtl):after{right:5.75px}}}}