.swatch-navigation__list{display:flex;flex-wrap:wrap;list-style:none;flex:0 0 100%;padding:0;margin:0;max-width:32rem;min-width:fit-content;border:none}.swatch-navigation__title .swatch-navigation__tooltip{display:none}.swatch-navigation__title.active .swatch-navigation__tooltip{display:initial}.swatch-navigation__title.active .swatch-navigation__selected-value{display:none}.swatch-navigation__link{--swatch-input--border-radius: 50%;display:inline-block;max-width:100%;margin:.4rem .8rem 0 0;border-radius:var(--swatch-input--border-radius);cursor:pointer;outline-offset:.2rem;outline-color:transparent;outline-style:solid;transition-property:outline-color,outline-width,box-shadow;transition-duration:var(--duration-short);transition-timing-function:ease;forced-color-adjust:none}.swatch-navigation__link.swatch-input__label--square,.swatch-navigation__link .swatch.swatch--square{--swatch-input--border-radius: 0}.swatch-navigation__link.active{outline:.1rem solid rgb(var(--color-foreground))}.swatch-navigation__link:hover .swatch{border:1px solid rgba(var(--color-foreground),1)}.swatch-navigation__link:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.5);box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 .1rem .5rem rgba(var(--color-foreground),.25)}.swatch-navigation__link:active:focus-visible,.swatch-navigation__link.active:focus-visible{outline:.1rem solid rgb(var(--color-foreground));box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 .1rem .4rem rgba(var(--color-foreground),.25)}.swatch-navigation__link .swatch{--swatch-input--size: 3.2rem;--swatch--size: var(--swatch-input--size, 2.4rem);--swatch--border-radius: 50%;position:relative;overflow:hidden;display:block;width:var(--swatch--size);max-width:100%;aspect-ratio:1 / 1;background:var(--swatch--background);background-position:var(--swatch-focal-point, initial);background-size:cover;background-origin:border-box;border:.1rem solid rgba(var(--color-foreground),.15);border-radius:var(--swatch--border-radius)}.swatch-navigation__link .swatch--unavailable{border-style:dashed;border-color:rgba(var(--color-foreground),.5);opacity:.4}.swatch-navigation__link .swatch--unavailable:after{--diagonal--size: calc(var(--swatch-input--size) * 1.414);--crossed-line--size: .1rem;content:"";position:absolute;bottom:calc(var(--crossed-line--size) * -.5);left:0;width:var(--diagonal--size);height:var(--crossed-line--size);background-color:rgb(var(--color-foreground));transform:rotate(-45deg);transform-origin:left}
/*# sourceMappingURL=/cdn/shop/t/21/assets/component-swatch-navigation.css.map */