.card-color-swatches{position:relative;display:flex;flex-wrap:wrap;width:100%;gap:12px;padding:12px 12px 0 0}.card--card .card-color-swatches{gap:8px}.color-swatch{display:block;height:20px;width:20px;border:1px solid rgba(var(--color-foreground),0);position:relative;z-index:2;transition:border var(--duration-default) ease}.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;word-break:break-all;max-width:8rem;width:100dvw}.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:1px solid rgb(var(--color-foreground))}.color-swatch:hover{border:1px solid rgba(var(--color-foreground),.4)}.color-swatch--sm{width:2.2rem;height:2.2rem}.color-swatch--md{width:2.8rem;height:2.8rem}.color-swatch--bg{width:3.4rem;height:3.4rem}.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:var(--swatch-background);background-position:center;background-size:cover;width:100%;height:100%;border:none}.color-swatch__color--inner-border{border:1px solid rgb(var(--color-background))}.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;transition:color var(--duration-default) ease;z-index:2}.color-swatch--action:hover{color:rgba(var(--color-foreground),1)}.color-swatch--action .icon{width:100%;height:100%}.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:4px}.color-swatch--action.color-swatch--md{padding:8px}.color-swatch--action.color-swatch--bg{padding:14px}.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)}.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/2/assets/card-color-swatches.css.map */