@layer components{input[type=checkbox]{appearance:none;border:1px solid var(--color-checkbox-border);cursor:pointer;background-color:var(--color-checkbox-background);border-radius:.25rem;width:1rem;height:1rem;position:relative}input[type=checkbox]:checked{background-color:var(--color-checkbox-checked-background);border-color:var(--color-checkbox-checked-border)}input[type=checkbox]:checked:after{content:"✓";color:var(--color-checkbox-checked-mark);font-size:.75rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}