.color-swatch{--swatch-offset:3px;--swatch-size:var(--spacing-5);--swatch-margin:calc(var(--swatch-offset)*2);background:var(--swatch-background) center /cover;border:1px solid rgb(var(--border-color));display:grid;height:var(--swatch-size);margin:var(--swatch-margin);place-items:center;position:relative;width:var(--swatch-size)}.color-swatch.is-disabled,:disabled+.color-swatch{background:linear-gradient(to bottom right,#0000 calc(50% - 1px),rgb(var(--background)) calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),var(--swatch-background) center /cover}.color-swatch:before{border-radius:inherit;box-shadow:0 0 0 2px;content:"";inset:calc(var(--swatch-offset)*-1);opacity:0;position:absolute;transform:scale(.75);transition:opacity .2s ease-in-out,transform .2s ease-in-out;will-change:transform}.color-swatch.is-selected:before,:checked+.color-swatch:before{opacity:1;transform:scale(1)}:focus-visible+.color-swatch{outline-offset:calc(2px + var(--swatch-offset)*2)}.color-swatch--rectangle{--swatch-size:var(--spacing-10);height:calc(var(--swatch-size)*.4);margin:0}.color-swatch--rectangle:before{bottom:-3px;box-shadow:0 2px;width:100%}.color-swatch--rectangle:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{left:0}.color-swatch--rectangle:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:0}.color-swatch--sm{--swatch-size:var(--spacing-3-5);--swatch-offset:2px}.color-swatch--rectangle.color-swatch--sm{--swatch-size:var(--spacing-5);margin-block-end:6px;margin-block-start:7px}.color-swatch--rectangle.color-swatch--sm:before{bottom:-2px}.color-swatch__view-more{border-width:1px;color:rgb(var(--text-color)/.7);margin-inline-start:var(--spacing-1-5);padding:1px var(--spacing-2)}.media-swatch{--swatch-size:60px;border-radius:min(4px,var(--rounded-input));display:block;height:var(--swatch-size);position:relative;width:var(--swatch-size)}.media-swatch:before{border-radius:inherit;box-shadow:0 0 0 2px;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;will-change:transform}.media-swatch.is-disabled:after,.media-swatch:before{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.media-swatch.is-disabled:after{background-image:linear-gradient(to bottom right,#0000 calc(50% - 1px),rgb(var(--text-color)/.5) calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px))}.media-swatch>img{border-radius:inherit;height:100%;object-fit:cover}.media-swatch.is-selected:before,:checked+.media-swatch:before{opacity:1;transform:scale(1)}:focus-visible+.media-swatch{outline-offset:4px}.media-swatch--sm{--swatch-size:48px}.media-swatch__view-more{border-radius:min(4px,var(--rounded-input));border-width:1px;display:grid;height:var(--spacing-12);place-items:center;width:var(--spacing-12)}.block-swatch{background:rgb(var(--input-background,var(--background))) no-repeat;border-radius:var(--rounded-button);border-width:1px;display:flex;gap:var(--spacing-3);height:var(--input-height);padding-inline-end:var(--spacing-5);padding-inline-start:var(--spacing-5);place-items:center;position:relative}.block-swatch.is-disabled{background-image:linear-gradient(to bottom right,#0000 50%,currentColor 50% calc(50% + 2px),#0000 calc(50% + 2px));color:rgb(var(--text-color)/.5)}.block-swatch:before{border-radius:inherit;bottom:0;box-shadow:0 0 0 2px rgb(var(--text-color));content:"";left:0;opacity:0;position:absolute;right:0;top:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;will-change:transform}:checked+.block-swatch.is-disabled{background-image:linear-gradient(to bottom right,#0000 50%,rgb(var(--text-color)) 50% calc(50% + 2px),#0000 calc(50% + 2px))}.block-swatch.is-selected:before,:checked+.block-swatch:before{opacity:1;transform:scale(1)}:focus-visible+.block-swatch{outline-offset:4px}.block-swatch__color{background:var(--swatch-background) center /cover;border-radius:var(--rounded-full);height:var(--spacing-3-5);width:var(--spacing-3-5)}@media screen and (min-width:700px){.block-swatch{padding-inline-end:var(--spacing-6);padding-inline-start:var(--spacing-6)}}
/*# sourceMappingURL=/cdn/shop/t/188/assets/css-swatch.bundle.css.map */