@layer atoms{.phxsg-checkbox{--_comp-checkbox-size: var(--comp-checkbox-size, 20px);--_comp-checkbox-color: var(--comp-checkbox-color, var(--sys-color-foreground));display:inline-flex;align-items:baseline;gap:var(--sys-spacing-2);position:relative;cursor:pointer;&:has(.phxsg-checkbox__input:disabled){--comp-checkbox-color: var(--sys-color-subtle);cursor:not-allowed}}.phxsg-checkbox__input{inline-size:var(--_comp-checkbox-size);block-size:var(--_comp-checkbox-size);margin:0;position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0;cursor:inherit}.phxsg-checkbox__box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:var(--_comp-checkbox-size);block-size:var(--_comp-checkbox-size);color:var(--sys-color-background);background-color:var(--sys-color-background);border:1px solid var(--_comp-checkbox-color);transition:background-color var(--sys-motion-duration-short-2) var(--sys-motion-easing-standard);.phxsg-checkbox__input:checked+&{background-color:var(--_comp-checkbox-color)}.phxsg-checkbox__input:focus-visible+&{outline:2px solid var(--sys-color-foreground);outline-offset:2px}}.phxsg-checkbox__icon{opacity:0;transition:opacity var(--sys-motion-duration-short-2) var(--sys-motion-easing-standard);.phxsg-checkbox__input:checked+.phxsg-checkbox__box &{opacity:1}}}