.color-swatches-wrapper{display:flex;gap:var(--space-2)}.color-swatches-wrapper .color-swatches{--swatch-gap:3px;display:flex;flex-wrap:wrap;gap:var(--swatch-gap)}.color-swatches-wrapper .color-swatches .color-swatch-item{background:var(--color-swatch-image);background-size:contain;border-radius:var(--swatch-size);flex-shrink:0;height:var(--swatch-size);outline:none;position:relative;width:var(--swatch-size)}.color-swatches-wrapper .color-swatches .color-swatch-item:before{--width:calc(var(--swatch-active-outline-width)*3 - 1px);border:var(--width) solid var(--background-color,var(--background-color-light-1));border-radius:var(--swatch-size);content:"";inset:-1px;position:absolute}.color-swatches-wrapper .color-swatches .color-swatch-item.active:before,.color-swatches-wrapper .color-swatches .color-swatch-item:focus-visible:before{border-width:var(--swatch-active-outline-width);inset:var(--swatch-active-outline-width)}.color-swatches-wrapper .color-swatches .color-swatch-item.swatch-non-existent:after,.color-swatches-wrapper .color-swatches .color-swatch-item.swatch-unavailable:after{background-color:var(--background-color-light-1);bottom:3px;content:"";height:2px;left:6px;position:absolute;transform:rotate(-45deg);transform-origin:left bottom;width:101%}.color-swatches-wrapper .color-swatches .color-swatch-item.swatch-non-existent.active:after,.color-swatches-wrapper .color-swatches .color-swatch-item.swatch-unavailable.active:after{background-color:var(--background-color-light-1);bottom:6px;content:"";height:2px;left:9px;position:absolute;transform:rotate(-45deg);transform-origin:left bottom;width:80%}.color-swatches-wrapper .color-swatches .color-swatch-item img{border-radius:var(--swatch-size);height:var(--swatch-size);pointer-events:none;width:var(--swatch-size)}.color-swatches-wrapper .swatches-arrow{color:var(--body-font-color-2);display:flex;flex-direction:column;flex-shrink:0;justify-content:center;left:-10px;position:relative}.color-swatches-wrapper .swatches-arrow svg{height:18px;width:18px}