.checkbox{align-items:flex-start;gap:var(--space-3);min-height:var(--hit-min);cursor:pointer;display:inline-flex}.checkbox.is-disabled{opacity:.4;cursor:default}.checkbox__input{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.checkbox__box{width:calc(var(--space-8) - 2px);height:calc(var(--space-8) - 2px);margin-top:var(--space-2);border:2px solid var(--border-strong);border-radius:var(--radius-btn-xs);background:var(--surface);color:var(--on-fill);transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);flex:none;place-items:center;display:inline-grid;position:relative}.checkbox__box:before{content:"";inset:calc((var(--space-8) - 2px - var(--hit-min)) / 2);position:absolute}.checkbox__tick{width:var(--space-5);height:var(--space-5);opacity:0;transition:opacity var(--dur) var(--ease)}.checkbox__input:checked+.checkbox__box{background:var(--primary);border-color:var(--primary)}.checkbox__input:checked+.checkbox__box .checkbox__tick{opacity:1}.checkbox__input:focus-visible+.checkbox__box{outline:2px solid var(--ring);outline-offset:2px}.checkbox__label{padding-top:var(--space-2);color:var(--foreground)}