.c-brand-color-input{display:grid;gap:.625rem;margin-block-end:1.25rem}.c-brand-color-input__label{color:#334155;font-size:.875rem;font-weight:600}.c-brand-color-input__required{color:#dc2626;margin-left:.25rem}.c-brand-color-input__control{align-items:center;display:flex;gap:.75rem}.c-brand-color-input__swatch{background:linear-gradient(45deg,#e2e8f0 25%,transparent 0) 0 0/.75rem .75rem,linear-gradient(-45deg,#e2e8f0 25%,transparent 0) 0 0/.75rem .75rem,#fff;border:1px solid #cbd5e1;border-radius:.75rem;cursor:pointer;display:grid;height:3rem;overflow:hidden;place-items:center;transition:box-shadow .15s ease,transform .15s ease;width:3rem}.c-brand-color-input__swatch:focus-within{box-shadow:0 0 0 3px rgba(15,118,110,.22)}.c-brand-color-input__swatch:hover{transform:translateY(-1px)}.c-brand-color-input__picker{block-size:100%;cursor:pointer;inline-size:100%;opacity:0}.c-brand-color-input__value{background:#fff;border:1px solid #cbd5e1;border-radius:.75rem;color:#0f172a;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9375rem;letter-spacing:.02em;min-inline-size:0;padding:.8125rem .875rem;transition:border-color .15s ease,box-shadow .15s ease;width:min(100%,17rem)}.c-brand-color-input__value::-moz-placeholder{color:#94a3b8}.c-brand-color-input__value::placeholder{color:#94a3b8}.c-brand-color-input__value:focus{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.16);outline:0}.c-brand-color-input__value--error{border-color:#dc2626}.c-brand-color-input__preview{align-items:center;color:#64748b;display:flex;font-size:.8125rem;gap:.5rem}.c-brand-color-input__preview-swatch{background:linear-gradient(45deg,#e2e8f0 25%,transparent 0) 0 0/.5rem .5rem,linear-gradient(-45deg,#e2e8f0 25%,transparent 0) 0 0/.5rem .5rem,#fff;border:1px solid #cbd5e1;border-radius:999px;block-size:.75rem;flex:0 0 auto;inline-size:.75rem}.c-brand-color-input__info{color:#64748b;font-size:.8125rem;line-height:1.5;white-space:pre-line}