.zfs-swatches.svelte-1yz0l5d{display:flex;flex-direction:column;gap:8px}.zfs-swatches__head.svelte-1yz0l5d{display:flex;align-items:baseline;gap:8px;font-family:var(--font-sans)}.zfs-swatches__label.svelte-1yz0l5d{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-subtle)}.zfs-swatches__val.svelte-1yz0l5d{font-size:13px;color:var(--text)}.zfs-swatches__row.svelte-1yz0l5d{display:flex;flex-wrap:wrap;gap:10px}.zfs-swatch.svelte-1yz0l5d{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;border:0;padding:0;border-radius:999px;width:36px;height:36px;box-sizing:border-box}.zfs-swatch__dot.svelte-1yz0l5d{width:28px;height:28px;border-radius:999px;border:1px solid var(--border-strong);box-sizing:border-box;background-size:cover;background-position:center}.zfs-swatch--material.svelte-1yz0l5d .zfs-swatch__dot:where(.svelte-1yz0l5d){border-radius:var(--radius-sm)}.zfs-swatch[aria-checked=true].svelte-1yz0l5d{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}.zfs-swatch.svelte-1yz0l5d:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--signal)}.zfs-swatch--oos.svelte-1yz0l5d{cursor:not-allowed}.zfs-swatch--oos.svelte-1yz0l5d .zfs-swatch__dot:where(.svelte-1yz0l5d){opacity:.5}.zfs-swatch--oos.svelte-1yz0l5d:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--text-subtle);transform:rotate(-45deg)}