.check-box{--cursor: pointer;--checkmark-opacity: 0;--checkmark-transform: scale(2);--indeterminate-mark-opacity: 0;--indeterminate-mark-transform: scale(0);--size: var(--s3);display:inline-grid;grid-template-columns:var(--size) 1fr;margin-block:var(--s0);min-block-size:var(--size);min-inline-size:var(--size);position:relative;& .input{cursor:var(--cursor);grid-column:1;inset-block-start:0;inset-inline-start:0;opacity:0;position:absolute;size:var(--size);z-index:1;&:not(:disabled):active,&:focus{+ .check-box-root { --checkmark-border-color: var(--color-primary); }}&:checked{+ .check-box-root { --checkmark-opacity: 1; --checkmark-transform: scale(1); }}&:indeterminate{+ .check-box-root { --indeterminate-mark-opacity: 1; --indeterminate-mark-transform: scale(1); }}&:required{+ .check-box-root { --checkmark-border-style: dashed; } + .check-box-root::after {content: "*"; display: block; inset-block-start: 0; inset-inline-end: calc(-1 * var(--s1)); position: absolute;}}&:disabled{+ .check-box-root { --cursor: not-allowed; filter: grayscale(1); opacity: .6; }}}& .check-box-root{block-size:var(--size);display:block;grid-column:1;inline-size:var(--size);inset-block-start:0;inset-inline-start:0;position:absolute;user-select:none;& .symbol-container{position:relative;size:100%;& .symbol{align-items:center;background-color:var(--color-background-input);border-radius:var(--border-radius);box-shadow:inset 0 0 0 .1rem var(--checkmark-border-color, var(--color-border));display:flex;inset-block-start:0;inset-inline-start:0;justify-content:center;position:absolute;size:100%;transition:box-shadow .14s ease;& .icon{align-items:center;display:flex;justify-content:center;position:relative;size:var(--size);& .checkmark,& .indeterminate-mark{pointer-events:none;position:absolute;transition:opacity .08s ease-in,transform .12s ease-in-out}& .checkmark{color:var(--color-input);opacity:var(--checkmark-opacity);size:var(--size);transform:var(--checkmark-transform)}& .indeterminate-mark{background-color:var(--color-input);border-radius:.1rem;opacity:var(--indeterminate-mark-opacity);size:calc(var(--size) * .3);transform:var(--indeterminate-mark-transform)}}}}}& .label{cursor:var(--cursor);grid-column:2;margin-inline-start:var(--s1)}& .error{grid-column:2}}