.swatch{--swatch-size: 40px;--swatch-pad: 4px;--swatch-ring: rgba(0, 0, 0, .14);--swatch-selected: var(--color-ink);display:inline-block;width:var(--swatch-size);height:var(--swatch-size);padding:var(--swatch-pad);border:1px solid transparent;border-radius:var(--radius-pill);transition:border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.swatch:hover{transform:scale(1.06)}.swatch[aria-pressed=true]{border-color:var(--swatch-selected)}.swatch__color{display:block;width:100%;height:100%;border-radius:var(--radius-pill);background:var(--swatch-color);box-shadow:inset 0 0 0 1px var(--swatch-ring)}.swatch.small{--swatch-size: 32px;--swatch-pad: 4px}.swatch.on-media{--swatch-selected: var(--color-paper)}.swatch.on-media .swatch__color{box-shadow:0 0 0 1px color-mix(in srgb,var(--color-paper) 55%,transparent)}.swatch.thread .swatch__color{--swatch-thread-texture: repeating-linear-gradient(-20deg, rgba(255, 255, 255, .22) 0 1px, rgba(0, 0, 0, .1) 1px 3px);--swatch-thread-shade: inset 0 -4px 8px rgba(0, 0, 0, .15);background:var(--swatch-thread-texture),var(--swatch-color);box-shadow:inset 0 0 0 1px var(--swatch-ring),var(--swatch-thread-shade)}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-swatch.css.map */