.swatch{--swatch--size: var(--swatch-input--size, 4.4rem);--swatch--border-radius: var(--swatch-input--border-radius, 50%);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-width:.1rem;border-style:solid;border-color:color-mix(in srgb,black 20%,var(--swatch--background));border-radius:var(--swatch--border-radius)}.swatch--square{--swatch--border-radius: 0}.swatch--unavailable{border-style:dashed;border-color:rgba(var(--color-foreground),.5)}swatch-group{display:flex;flex-wrap:wrap;gap:var(--spacing-x-small);margin-block-start:var(--spacing-xx-small)}swatch-group .active{outline:1px solid var(--bg-color-black);outline-offset:1px}swatch-group .button.link.swatch-button,swatch-group .button.link.swatch-link{border-radius:var(--radius-xx-small);padding:.125rem;overflow:hidden;position:relative;z-index:1}swatch-group .button.link.swatch-button.swatch--circle,swatch-group .button.link.swatch-link.swatch--circle{border-radius:50%}swatch-group .button.link.swatch-button--unavailable,swatch-group .button.link.swatch-link--unavailable{outline:1px solid var(--body-text-color);opacity:.6}swatch-group .button.link.swatch-button--unavailable:before,swatch-group .button.link.swatch-link--unavailable:before{content:"";position:absolute;border-top:1px solid var(--body-text-color);width:150%;transform:translate(-38%) translateY(-200%) rotate(315deg);transform-origin:top right}swatch-group .button.link.swatch-button--unavailable img,swatch-group .button.link.swatch-link--unavailable img{position:relative;z-index:-1}swatch-group .button.link.swatch-button:not(:focus-visible):not(.swatch-button--unavailable),swatch-group .button.link.swatch-button:not(:focus):not(.swatch-button--unavailable),swatch-group .button.link.swatch-link:not(:focus-visible):not(.swatch-link--unavailable),swatch-group .button.link.swatch-link:not(:focus):not(.swatch-link--unavailable){outline:1px solid var(--border-color)}swatch-group .button.link.swatch-button.active:not(:focus-visible),swatch-group .button.link.swatch-button.active:not(:focus),swatch-group .button.link.swatch-link.active:not(:focus-visible),swatch-group .button.link.swatch-link.active:not(:focus){outline-color:var(--focus-color);outline-offset:0}swatch-group .button.link.swatch-button--more,swatch-group .button.link.swatch-link--more{align-items:center;display:flex;justify-content:center;height:2.5rem;width:2.5rem}quick-add-modal :is(swatch-group .button.link.swatch-button--more),quick-add-modal :is(swatch-group .button.link.swatch-link--more){height:3rem;width:3rem}swatch-group .swatch{--swatch-input--size: 1.25rem}swatch-group .swatch-link.sold-out{position:relative;cursor:not-allowed}swatch-group .swatch-link.sold-out:after{content:"";position:absolute;width:1px;height:40px;background-color:var(--bg-color-white);transform:translate(-50%,-50%) rotate(45deg);top:50%;left:50%;z-index:1}