.color-family[data-v-a785c971]{--swatch-width:100%;border-radius:var(--border-radius-sm);color:var(--fg-up);cursor:pointer;display:grid;grid-template-columns:repeat(calc(var(--steps) + 1),1fr);justify-content:stretch}.color-family[data-v-a785c971]:hover{outline:2px dashed var(--fg);outline-offset:-1px;z-index:1}.color-family.-customize[data-v-a785c971]{outline:2px solid var(--fg-up);outline-offset:-1px;z-index:2}.color-family.--wrap[data-v-a785c971] .color-swatch{aspect-ratio:2}.color-family.--wrap[data-v-a785c971]:not(:last-of-type) .color-swatch:first-child{border-top-left-radius:var(--border-radius-md)}.color-family.--wrap[data-v-a785c971]:not(:last-of-type) .color-swatch:nth-last-child(2){border-top-right-radius:var(--border-radius-md)}.color-family.--wrap[data-v-a785c971]:last-of-type .color-swatch:first-child{border-bottom-left-radius:var(--border-radius-md)}.color-family.--wrap[data-v-a785c971]:last-of-type .color-swatch:nth-last-child(2){border-bottom-right-radius:var(--border-radius-md)}.remove-button[data-v-a785c971]{--button-fg:var(--fg);--button-fg-hover:var(--fg-danger);--button-bg:transparent;--button-bg-hover:var(--button-bg);height:100%;min-height:0;min-width:0;opacity:.4;width:100%}.remove-button[data-v-a785c971]:focus-visible,.remove-button[data-v-a785c971]:hover{opacity:1}.-customize .remove-button[data-v-a785c971]{opacity:1}