.swatch{--swatch--size: var(--swatch-size-card);--swatch--ring: .1rem;--swatch--strike: linear-gradient( to bottom right, transparent calc(50% - .05rem) , rgb(var(--color-text-subtle)) calc(50% - .05rem) , rgb(var(--color-text-subtle)) calc(50% + .05rem) , transparent calc(50% + .05rem) );position:relative;display:block;flex-shrink:0;width:calc(var(--swatch--size) + .8rem);aspect-ratio:1 / 1;border-radius:50%;box-shadow:inset 0 0 0 var(--swatch--ring) transparent;transition:box-shadow var(--motion-duration) ease}.swatch--selector{--swatch--size: var(--swatch-size-selector);--swatch--ring: .15rem}.swatch:before{content:"";position:absolute;top:.4rem;right:.4rem;bottom:.4rem;left:.4rem;border-radius:50%;border:.1rem solid rgb(var(--color-border-default));background:var(--swatch--background, rgb(var(--color-text-disabled)));background-position:var(--swatch-focal-point, center);background-size:cover;background-clip:padding-box}.swatch--case:before{background:linear-gradient(to right,transparent 50%,var(--swatch--case) 50%),var(--swatch--background, rgb(var(--color-text-disabled)));background-position:center,var(--swatch-focal-point, center);background-size:100% 100%,cover;background-clip:padding-box}.swatch:hover,a:hover>.swatch,button:hover>.swatch,label:hover>.swatch{box-shadow:inset 0 0 0 var(--swatch--ring) rgb(var(--color-border-default))}.swatch--selected,.swatch--selected:hover,[aria-current]>.swatch,:checked+label>.swatch{box-shadow:inset 0 0 0 var(--swatch--ring) rgb(var(--color-border-strong))}.swatch--unavailable:before{opacity:var(--opacity-disabled)}.swatch--unavailable:after{content:"";position:absolute;top:.5rem;right:.5rem;bottom:.5rem;left:.5rem;background:var(--swatch--strike)}.swatch--selector.swatch--unavailable:after{top:.62rem;right:.62rem;bottom:.62rem;left:.62rem}.swatch--selected.swatch--unavailable,.swatch--selected.swatch--unavailable:hover,[aria-current]>.swatch--unavailable,:checked+label>.swatch--unavailable{box-shadow:inset 0 0 0 var(--swatch--ring) rgb(var(--color-text-subtle))}.swatch--selected.swatch--unavailable:after,[aria-current]>.swatch--unavailable:after,:checked+label>.swatch--unavailable:after{inset:calc((var(--swatch--size) + .8rem) * .1464)}
/*# sourceMappingURL=/cdn/shop/t/48/assets/component-swatch.css.map */