.material-swatches{grid-template-columns:repeat(10,30px);gap:12px 10px;margin:-4px;padding:4px;display:grid;overflow:visible}.material-swatch{image-rendering:auto;transform-origin:50%;background-color:#e8e8ea;background-position:50%;background-repeat:no-repeat;background-size:cover;border:0;border-radius:999px;width:30px;height:30px;margin:0;padding:0;transition:transform .18s,box-shadow .18s;display:block;box-shadow:inset 0 0 0 1px #00000014}button.material-swatch{cursor:pointer;z-index:0;position:relative}button.material-swatch:hover,button.material-swatch:focus-visible{z-index:2;transform:scale(1.14)}button.material-swatch:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.material-swatch.is-selected{z-index:1;box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--color-accent)}.material-swatch-tooltip{z-index:3;max-width:min(220px,70vw);font-size:13px;font-weight:var(--font-weight-emphasis,500);letter-spacing:-.01em;text-align:center;white-space:nowrap;pointer-events:none;opacity:0;border-radius:999px;align-items:center;padding:4px 11px;line-height:1.3;transition:opacity .16s,translate .16s;display:inline-flex;position:absolute;bottom:calc(100% + 10px);left:50%;translate:-50% 6px}button.material-swatch:hover .material-swatch-tooltip,button.material-swatch:focus-visible .material-swatch-tooltip{opacity:1;translate:-50%}@media (prefers-reduced-motion:reduce){.material-swatch-tooltip{transition:none;translate:-50%}}@media (hover:none){.material-swatch-tooltip{display:none}}@media (max-width:900px){.material-swatches{grid-template-columns:repeat(auto-fill,30px);max-width:none;margin-block:-4px;margin-inline:12px}}