.swatch-input__input+.swatch-input__label{--swatch-input--border-radius: 50%;display:inline-block;max-width:100%;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-input__input+.swatch-input__label.swatch-input__label--square{--swatch-input--border-radius: .2rem}.swatch-input__input:active+.swatch-input__label,.swatch-input__input:checked+.swatch-input__label{outline:.1rem solid rgb(var(--color-foreground))}.swatch-input__input+.swatch-input__label:hover,.swatch-input__input:hover+.swatch-input__label{outline:.2rem solid rgba(var(--color-foreground),.4)}.swatch-input__input:focus-visible+.swatch-input__label{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-input__input:active:focus-visible+.swatch-input__label,.swatch-input__input:checked:focus-visible+.swatch-input__label{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-input__input.visually-disabled:not(:active):not(:checked)+.swatch-input__label{transition:none}.swatch-input__input.visually-disabled:not(:active):not(:checked)+.swatch-input__label:hover{outline:none}.swatch-input__input:disabled+.swatch-input__label{pointer-events:none}.swatch-input__input:disabled+.swatch-input__label>.swatch,.swatch-input__input.visually-disabled+.swatch-input__label>.swatch{position:relative;overflow:hidden}.swatch-input__input:disabled+.swatch-input__label>.swatch,.swatch-input__input.visually-disabled+.swatch-input__label>.swatch{opacity:.4}.swatch-input__input:disabled+.swatch-input__label>.swatch:after,.swatch-input__input.visually-disabled+.swatch-input__label>.swatch: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}.swatch-input__label.color-swatch{width:75px;height:75px;padding:3px;border:3px solid transparent;border-radius:5%;position:relative;display:inline-block}.swatch-input__label.color-swatch img{width:100%;height:100%;object-fit:cover;display:block}.swatch-input__input:checked+.swatch-input__label.color-swatch{border-color:rgb(var(--color-foreground))}.swatch-input__input:hover+.swatch-input__label.color-swatch{outline:none}.swatch-input__input:disabled+.swatch-input__label.color-swatch:after{content:"";position:absolute;left:0;top:50%;right:0;width:100%;border-top:2px solid var(--color-base-accent-2);transform:rotate(-44deg)}.swatch-input__label.color-swatch span.color-tooltip{position:absolute;top:-45px;left:50%;z-index:1;transform:translate(-50%);background:#ffaadc;padding:10px;font-size:12px;transition:all .3s;border-radius:3px;visibility:hidden;opacity:0;color:#fff;pointer-events:none}.swatch-input__label.color-swatch span.color-tooltip:before{transform:rotate(45deg);content:"";position:absolute;width:12px;height:12px;bottom:-4px;left:50%;margin-left:-6px;background:#ffaadc}.swatch-input__label.color-swatch:hover span.color-tooltip:before,.swatch-input__label.color-swatch:hover span.color-tooltip{visibility:visible;opacity:1}.swatch-input__label.color-swatch .color-img-tooltip{position:absolute;bottom:calc(100% + 10px);left:0;width:250px;height:300px;visibility:hidden;opacity:0;z-index:1;background:#fff;border:1px solid rgba(var(--color-foreground),.2);border-radius:3px;overflow:hidden;pointer-events:none}.swatch-input__label.color-swatch .tooltip--img{width:100%;height:100%;position:relative}.swatch-input__label.color-swatch .tooltip--img>img{max-height:100%;width:100%;object-fit:cover}.swatch-input__label.color-swatch .tooltip--label{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:#000c;color:#fff;font-size:14px;text-align:center}@media screen and (min-width: 750px){.swatch-input__label.color-swatch:hover .color-img-tooltip{opacity:1;visibility:visible}}@media screen and (max-width: 749px){.swatch-input__label.color-swatch .color-img-tooltip{display:none}}
/*# sourceMappingURL=/cdn/shop/t/90/assets/component-swatch-input.css.map */
