.swatch-list{max-width:100%}.swatch-list>.group-swatch{align-items:center;gap:var(--gap,.6rem);flex-wrap:wrap;flex:100%;width:100%;min-width:0;display:none}.swatch-list>.group-swatch.is-expanded{display:flex}.swatch-item{--swatch--border-radius:var(--variant-pills-radius,50%);border:var(--variant-pills-border-width) solid rgb(var(--color-black-rgb) / var(--opacity-15));border-radius:var(--swatch--border-radius);box-shadow:var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset) var(--variant-pills-shadow-blur-radius) var(--color-shadow);padding:.2rem;&:after{content:"";inset:calc(var(--variant-pills-border-width) * -1);border:var(--variant-pills-border-width) solid rgb(var(--color-black-rgb) / var(--opacity-100));border-radius:var(--swatch--border-radius);pointer-events:none;opacity:var(--opacity-0);transition:transform .3s,opacity .3s;position:absolute;transform:scale(.8)}&.active:after{opacity:var(--opacity-100);transform:scale(1)}& label{cursor:pointer}}.swatch{--swatch--size:var(--swatch-input--size,4.4rem);width:var(--swatch--size);aspect-ratio:1;background-color:var(--swatch--background-color);background-image:var(--swatch--background);background-position:var(--swatch-focal-point,initial);border-radius:var(--swatch--border-radius);background-size:cover;background-origin:border-box}.swatch-item:has(.swatch--unavailable){border-style:dashed;border-color:rgb(var(--color-black-rgb) / var(--opacity-50))}.swatch-item:has(.swatch.active){border-style:solid;border-color:#000}.swatch-item .tooltip{display:none}@media (width>=1025px){.swatch-item .tooltip{opacity:var(--opacity-0);visibility:hidden;pointer-events:none;color:#fff;padding:var(--padding-2xs);min-width:var(--size-40);margin:0 0 var(--margin-sm);font-size:var(--font-size--2xs);background:#232323;border-radius:.2rem;transition:opacity .3s,transform .3s;display:block;transform:translateY(.5rem)}.swatch-item .tooltip:before{content:"";border-top:.7rem solid #232323;border-left:.7rem solid #0000;border-right:.7rem solid #0000;width:0;height:0;position:absolute;bottom:-.4rem;left:1rem;transform:translate(-50%)}.swatch-item:hover .tooltip{opacity:var(--opacity-100);visibility:visible;transform:translateY(0)}}