.colour-family{margin:0 0 1.25rem}
.colour-family__label{font-size:.875rem;margin-bottom:.5rem}
.colour-family__current{font-weight:600}
.colour-family__row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.colour-family__swatch{display:block;width:2rem;height:2rem;border-radius:50%;background:var(--colour-family-dot,#ddd);border:1px solid rgba(0,0,0,.18);box-shadow:0 0 0 2px transparent;transition:box-shadow .15s ease;text-decoration:none;flex:0 0 auto;opacity:1}
.colour-family__swatch:hover{box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.colour-family__swatch:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.colour-family__swatch.is-active{box-shadow:0 0 0 2px currentColor;cursor:default}
.colour-family--card{margin:.25rem 0 .4rem}
.colour-family--card .colour-family__row{gap:.3rem}
.colour-family--card .colour-family__swatch{width:.85rem;height:.85rem;border-width:1px;cursor:pointer}
.colour-family--card .colour-family__swatch:hover{box-shadow:0 0 0 1.5px rgba(0,0,0,.3)}
.colour-family--card .colour-family__swatch.is-active{box-shadow:0 0 0 1.5px currentColor;cursor:default}