.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: .1rem solid rgba(var(--color-foreground), .15);
    border-radius: var(--swatch--border-radius)
}

.swatch--square {
    --swatch--border-radius: var(--swatch-input--border-radius, .2rem)
}

.swatch--unavailable {
    border-style: dashed;
    border-color: rgba(var(--color-foreground), .5)
}

/*# sourceMappingURL=/cdn/shop/t/6/assets/component-swatch.css.map?v=6811383713633888781744294649 */