.hdc-swatch-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hdc-space-2);
    margin: var(--hdc-space-2) 0 calc(var(--hdc-space-3) + 2px);
}

.hdc-swatch {
    min-width: var(--hdc-control-height);
    min-height: calc(var(--hdc-control-height) - var(--hdc-space-1));
    padding: calc(var(--hdc-space-2) - 1px) var(--hdc-space-3);
    border: 1px solid var(--hdc-border);
    border-radius: var(--hdc-compact-radius);
    background: var(--hdc-surface);
    color: inherit;
    cursor: pointer;
}

.hdc-swatch:hover,
.hdc-swatch:focus-visible,
.hdc-swatch.is-selected {
    border: 2px solid var(--hdc-primary-hover);
}

.hdc-swatch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.variations select.hdc-select-enhanced {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
}