.color-swatches{display:flex;justify-content:flex-end}.color-swatches.color-swatches--left{justify-content:flex-start}.color-swatch__wrapper{display:inline-block;position:relative;margin:5px}.color-swatch{position:relative;border-radius:50%;width:30px;height:30px;border:1px solid #fff;display:inline-block}.color-swatch--small.color-swatch--light .color-swatch{box-shadow:0 0 0 1px #00000080}.color-swatch:after{content:"";position:absolute;width:30px;height:30px;top:-1px;left:-1px;border-radius:50%;-webkit-box-shadow:0 0 0 1px #cac3bd;box-shadow:0 0 0 1px #cac3bd;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:.3s -webkit-box-shadow;transition:.3s -webkit-box-shadow;transition:.3s box-shadow;transition:.3s box-shadow,.3s -webkit-box-shadow;-webkit-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);pointer-events:none}.color-swatch__wrapper:hover .color-swatch:after,.color-swatch.color-swatch--selected:after,.color-swatch.color-swatch--selected .color-swatch:after{-webkit-box-shadow:0 0 0 1px #000;box-shadow:0 0 0 1px #000}@media (max-width: 767px){.color-swatch{width:15px;height:15px}.color-swatch:after{width:15px;height:15px}}.color-swatch__wrapper.color-swatch--small{width:24px;height:24px;border:none}.color-swatch__wrapper.color-swatch--small:after{height:0}.color-swatch__wrapper.color-swatch--small .color-swatch{width:20px;height:20px;border:none;border-radius:50%}.color-swatch__wrapper.color-swatch--small .color-swatch:after{width:24px;height:24px;box-shadow:none;top:50%;left:50%;transform:translate(-50%,-50%)}.card-wrapper .color-swatches .card-information__wrapper{position:relative}.card-wrapper .color-swatches .color-swatches{position:absolute;top:0;left:0;background:rgb(var(--color-background));justify-content:center;width:100%;height:100%;opacity:0;visibility:hidden;z-index:-1;transition:opacity var(--duration-default) ease-in-out}.card-wrapper .color-swatches .color-swatch--selected .color-swatch:after{-webkit-box-shadow:0 0 0 1px #000;box-shadow:0 0 0 1px #000}.card-wrapper .color-swatches .color-swatch__wrapper.color-swatch--selected:after,.card-wrapper .color-swatches .color-swatch__wrapper:hover:after{content:unset}.card-wrapper .color-swatches:hover .color-swatches{z-index:0;visibility:visible;opacity:1}.additional-swatch-count{height:100%;vertical-align:middle;margin-left:5px}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-color-swatches.css.map */