.sf-color-swatch{border:var(--border-hairline) solid var(--color-border-default);border-radius:var(--radius-xs);flex-shrink:0;display:inline-flex;position:relative;overflow:hidden}.sf-color-swatch--sm{width:var(--icon-small);height:var(--icon-small)}.sf-color-swatch--md{width:var(--space-24);height:var(--space-24)}.sf-color-swatch__checker{background-color:var(--color-surface-input);background-image:var(--color-picker-checker-image);background-position:var(--color-picker-checker-position-sm);background-size:var(--color-picker-checker-size-sm);position:absolute;inset:0}.sf-color-swatch__fill{position:absolute;inset:0}