token-swatch{display:block;cursor:pointer;border-radius:var(--ds-radio-md);outline-offset:3px;position:relative}token-swatch:focus-visible{outline:2px solid var(--ds-fosforo-tinta)}swatch-chip{display:block;height:5.5rem;border-radius:var(--ds-radio-md);background:var(--muestra);box-shadow:inset 0 0 0 1px #10141714}token-swatch[span=wide] swatch-chip{height:8rem}swatch-meta{display:block;padding-top:var(--ds-e3)}swatch-name{display:block;font-family:var(--ds-fuente-texto);font-size:var(--ds-cuerpo);font-weight:600;color:var(--ds-tinta)}swatch-token,swatch-hex{display:block;font-family:var(--ds-fuente-dato);font-size:var(--ds-menuda);color:var(--ds-ceniza);letter-spacing:-.01em}swatch-hex{text-transform:uppercase}swatch-use{display:block;margin-top:var(--ds-e2);font-family:var(--ds-fuente-texto);font-size:var(--ds-etiqueta);line-height:1.45;color:var(--ds-grafito)}token-swatch:after{content:"copiado";position:absolute;top:var(--ds-e3);left:var(--ds-e3);padding:.2em .6em .25em;border-radius:var(--ds-radio-full);background:var(--ds-papel);color:var(--ds-tinta);font-family:var(--ds-fuente-texto);font-size:var(--ds-menuda);font-weight:600;opacity:0;pointer-events:none}token-swatch[copied=on]:after{opacity:1}@media(prefers-reduced-motion:no-preference){swatch-chip{transition:transform var(--ds-dur-2) var(--ds-ease-resorte)}token-swatch:hover swatch-chip{transform:translateY(-3px)}token-swatch:after{transition:opacity var(--ds-dur-1) var(--ds-ease-estandar)}}