.swatch{--swatch-size: var(--swatch--size, 4.4rem);--swatch-border-radius: var(--swatch--border-radius, 50%);--swatch-border-width: var(--swatch--border-width--default, .0625rem);--swatch-border-color: var(--swatch--border-color--default, --body-text-color);display:block;width:var(--swatch-size);max-width:100%;aspect-ratio:1 / 1;background:var(--swatch--background);background-position:var(--swatch--focal-point, center);background-size:cover;background-origin:border-box;border:var(--swatch-border-width, .1rem) solid var(--swatch-border-color, rgb(from var(--body-text-color) r g b / .15));border-radius:var(--swatch-border-radius);position:relative;box-sizing:border-box}.swatch .icon--no-image{width:100%;height:100%;vertical-align:bottom}.swatch--square{--swatch-border-radius: var(--swatch--border-radius, 0rem)}.swatch--unavailable{border-color:rgb(from var(--body-text-color) r g b / .5)}