@layer components{:root{--twentyone--checkbox--width: var(--twentyone--spacing--24);--twentyone--checkbox--icon-font-size: var(--twentyone--element--font-size);--twentyone--checkbox--border-radius: var(--twentyone--spacing--8);--twentyone--checkbox--border-width: 1px;--twentyone--checkbox--border-color: var(--twentyone--color--grey);--twentyone--checkbox--border-color-active: var(--twentyone--color--primary);--twentyone--checkbox--background: var(--twentyone--color--white);--twentyone--checkbox--background-active: var(--twentyone--color--primary);--twentyone--checkbox--icon-color: var(--twentyone--color--white);--twentyone--checkbox--inverted-border-color: var(--twentyone--color--white);--twentyone--checkbox--inverted-border-color-active: var(--twentyone--color--white);--twentyone--checkbox--inverted-background: transparent;--twentyone--checkbox--inverted-background-active: var(--twentyone--color--white);--twentyone--checkbox--inverted-icon-color: var(--twentyone--color--black)}.twentyone-checkbox{--fake-element--width: var(--twentyone--checkbox--width);--fake-element--height: var(--twentyone--checkbox--width)}.twentyone-checkbox .twentyone-fake-element{aspect-ratio:1;background:var(--twentyone--checkbox--background);border-color:var(--twentyone--checkbox--border-color);border-style:solid;border-width:var(--twentyone--checkbox--border-width);fill:var(--twentyone--checkbox--icon-color);width:var(--twentyone--checkbox--width);border-radius:var(--twentyone--checkbox--border-radius)}.twentyone-checkbox .twentyone-fake-element .twentyone-icon svg{font-size:var(--twentyone--checkbox--icon-font-size);opacity:0;scale:.75}.twentyone-checkbox input:checked~.twentyone-fake-element{background:var(--twentyone--checkbox--background-active);border-color:var(--twentyone--checkbox--border-color-active)}.twentyone-checkbox input:checked~.twentyone-fake-element .twentyone-icon svg{opacity:1;scale:1}.twentyone-checkbox.is--inverted .twentyone-fake-element{background:var(--twentyone--checkbox--inverted-background);border-color:var(--twentyone--checkbox--inverted-border-color);fill:var(--twentyone--checkbox--inverted-icon-color)}.twentyone-checkbox.is--inverted input:checked~.twentyone-fake-element{background:var(--twentyone--checkbox--inverted-background-active);border-color:var(--twentyone--checkbox--inverted-border-color-active)}}