.fig-swatches{--fig-swatch-size:34px;--fig-swatch-radius:50%;--fig-swatch-gap:8px;--fig-swatch-border:rgba(0, 0, 0, .15);--fig-swatch-selected:#111;display:flex;flex-wrap:wrap;gap:var(--fig-swatch-gap);margin:6px 0 12px;padding:0}.fig-swatches--button,.fig-swatches--image{--fig-swatch-radius:6px}.fig-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--fig-swatch-size);height:var(--fig-swatch-size);border:1px solid var(--fig-swatch-border);border-radius:var(--fig-swatch-radius);background-size:cover;background-position:center;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease,opacity .15s ease;outline:none;user-select:none}.fig-swatches--button .fig-swatch,.fig-swatch--fallback{width:auto;padding:0 14px}.fig-swatches--image .fig-swatch{width:var(--fig-swatch-size)}.fig-swatch__text{font-size:13px;line-height:1;white-space:nowrap}.fig-swatch:hover{border-color:var(--fig-swatch-selected)}.fig-swatch--selected{border-color:var(--fig-swatch-selected)}.fig-swatch:focus-visible{outline:2px solid var(--fig-swatch-selected);outline-offset:2px}.fig-swatch--disabled{opacity:.35;cursor:not-allowed}.fig-swatch--disabled::after{content:"";position:absolute;inset:0;background:linear-gradient(to top left,transparent calc(50% - 1px),currentColor,transparent calc(50% + 1px));opacity:.4;border-radius:inherit;pointer-events:none}