.sc-hover-color-pair__swatches{align-items:center;gap:var(--space-3);margin-inline-start:auto;display:flex}.sc-hover-color-pair__swatch-group{align-items:center;gap:var(--space-1);flex-direction:column;display:inline-flex;position:relative}.sc-hover-color-pair__sub-label{font-family:var(--font-display);font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-dim);font-weight:600}.sc-hover-color-pair__swatch{border-radius:var(--radius-sm);border:1px solid var(--surface-container-highest);cursor:pointer;block-size:24px;inline-size:24px;transition:outline var(--motion-fast) var(--motion-ease);flex-shrink:0;padding:0;display:block;overflow:hidden}.sc-hover-color-pair__swatch[disabled]{opacity:.5;cursor:not-allowed}.sc-hover-color-pair__swatch-fill{block-size:100%;inline-size:100%;display:block}.sc-hover-color-pair__popover{top:calc(100% + var(--space-2));z-index:var(--z-overlay);background:var(--surface-container);border:1px solid var(--surface-container-high);border-radius:var(--radius-md);padding:var(--space-3);box-shadow:var(--shadow-md);gap:var(--space-2);flex-direction:column;min-inline-size:160px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.sc-hover-color-pair__color-input{cursor:pointer;border:none;block-size:32px;inline-size:100%}.sc-hover-color-pair__text-input{font-family:var(--font-mono);font-size:var(--text-body);color:var(--on-surface);background:var(--surface-container-low);border-radius:var(--radius-sm);padding-block:var(--space-1);padding-inline:var(--space-2);box-sizing:border-box;inline-size:100%;transition:outline var(--motion-fast) var(--motion-ease);border:none;outline:none}.sc-hover-color-pair__text-input[aria-invalid=true]{color:var(--error);background:var(--error-surface)}@container not (min-width:480px){.sc-hover-color-pair__swatches{justify-content:flex-start;margin-inline-start:0}}