.card-color-swatches{position:relative;display:flex;flex-wrap:wrap;width:100%;gap:12px;padding:12px 12px 12px 0}.card--card .card-color-swatches{gap:8px}.color-swatch{display:block;height:20px;width:20px;border:1px solid rgba(var(--color-foreground),.25);position:relative;z-index:2}.color-swatch--title:before{content:attr(title);position:absolute;bottom:calc(100% + 4px);left:50%;height:fit-content;transform:translate(-50%);background-color:rgb(var(--color-foreground));border-radius:4px;font-size:var(--font-size-sm);color:rgb(var(--color-background));padding:4px 6px;line-height:1;opacity:0;transition:opacity .3s ease-in-out;z-index:5;pointer-events:none;white-space:nowrap}.color-swatch--title:hover:before{opacity:1}.color-swatch--title-top:before{bottom:calc(100% + 4px)}.color-swatch--title-bottom:before{top:calc(100% + 4px)}.color-swatch[data-swatch-out]{display:none;opacity:0}.color-swatch[data-swatch-out].open-animation{display:block;opacity:1;animation:openSwatches .3s ease-in-out}.color-swatch[data-swatch-out].close-animation{display:none;opacity:0;animation:closeSwatches .3s .1s ease-in-out}.card-color-swatches.expanded .color-swatch[data-swatch-out]{display:block;opacity:1}.color-swatch.is-active{border:2px solid rgb(var(--color-foreground))}.color-swatch--sm{width:20px;height:20px}.color-swatch--md{width:28px;height:28px}.color-swatch--bg{width:36px;height:36px}.color-swatch--square,.color-swatch--square .color-swatch__color{border-radius:0}.color-swatch--rounded-square,.color-swatch--rounded-square .color-swatch__color{border-radius:25%}.color-swatch--circle,.color-swatch--circle .color-swatch__color{border-radius:50%}.color-swatch__color{pointer-events:none;display:block;background-color:var(--color-swatch);width:100%;height:100%;border:none}.color-swatch__color--inner-border{border:2px solid rgb(var(--color-background))}.color-swatch--image .color-swatch__color{background-image:var(--image-swatch);background-position:center;background-size:cover}.color-swatch--action{cursor:pointer;font-family:var(--font-body-family);background:none;color:rgba(var(--color-foreground),.5);border:none;font-size:var(--font-size-md);font-weight:400;padding:0;order:1;display:flex;justify-content:center;align-items:center}.color-swatch--action .icon-plus{display:block}.color-swatch--action .icon-minus,.card-color-swatches.expanded .color-swatch--action .icon-plus{display:none}.card-color-swatches.expanded .color-swatch--action .icon-minus{display:block}.color-swatch--action.color-swatch--sm{padding:3px}.color-swatch--action.color-swatch--md{padding:6px}.color-swatch--action.color-swatch--bg{padding:12px}.card-wrapper--swatches .card__media .media img{transition:ease,opacity .2s ease-in}.card-wrapper--swatches:hover .media.media--hover-effect img{opacity:1;transition:transform var(--duration-long) ease;transform:scale(1.03)}.card-wrapper--swatches .card__media .media.media--hover-effect img{transition:transform var(--duration-long) ease,opacity .2s ease-in}@keyframes openSwatches{0%{display:block;opacity:0}to{opacity:1}}@keyframes closeSwatches{0%{opacity:1;display:block}99%{opacity:0;display:block}to{display:none;opacity:0}}
/*# sourceMappingURL=/cdn/shop/t/192/assets/card-color-swatches.css.map */