.swatch-item{width:var(--swatch-item-width,100%);height:var(--swatch-item-height,var(--space-300));display:inline-block;position:relative}.swatch-item:before{content:"";border:1px solid var(--color-ui-900);z-index:1;opacity:0;transition:opacity var(--animation-fast);position:absolute;inset:0}.swatch-item__out-of-stock-overlay{background-color:var(--color-cream-200);opacity:.5;position:absolute;inset:0}.swatch-item__out-of-stock-overlay:before{content:"";background:linear-gradient(to top left, transparent calc(50% - .5px), var(--color-cream-300) calc(50% - .5px), var(--color-cream-300) calc(50% + .5px), transparent calc(50% + .5px));position:absolute;inset:0}.swatch-item--image{height:var(--swatch-item-height,auto);aspect-ratio:.8;object-fit:cover;object-position:center;transform-origin:0;background-position:50%;background-repeat:no-repeat;background-size:cover}.swatch-item--empty{--swatch-color:transparent}.swatch-item--empty,.swatch-item--outlined{border:var(--border-width-md) solid var(--color-cream-300)}.swatch-item--empty:before,.swatch-item--outlined:before{inset:calc(var(--border-width-md) * -1)}.swatch-item--outlined{border-color:var(--color-border-default)}.swatch-item:not(.swatch-item--image){background-color:var(--swatch-color,var(--color-content-default))}@media (hover:hover) and (pointer:fine){.swatch-item:hover:hover:before{opacity:1}}.is-selected>.swatch-item:before{opacity:1}