.swatch-pill{--swatch-pill-pad-x: .875rem;--swatch-pill-pad-y: .5rem;--swatch-pill-dot: 1.125rem;--swatch-pill-gap: .5rem;--swatch-pill-inset: 3px;--swatch-pill-duration: .68s;--swatch-pill-ease: cubic-bezier(.5, .08, .2, 1);--swatch-bg: transparent;--swatch-fg: #ffffff;position:relative;display:inline-flex;align-items:center;gap:var(--swatch-pill-gap);padding:var(--swatch-pill-pad-y) var(--swatch-pill-pad-x);border:1px solid rgba(var(--colors-line-and-border),.25);border-radius:9999px;background-color:#fff;color:rgba(var(--colors-text),1);line-height:1.25;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;transition:border-color .3s ease,color .3s ease}.swatch-pill--square{border-radius:.375rem}.swatch-pill.swatch-pill--badge-row{margin-top:1.65rem}.swatch-pill__fill-wrap{position:absolute;inset:var(--swatch-pill-inset);z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;background-color:#fff}.swatch-pill--square .swatch-pill__fill-wrap{border-radius:calc(.375rem - var(--swatch-pill-inset))}.swatch-pill__fill{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--swatch-bg);background-size:cover;background-position:center;background-repeat:no-repeat;--swatch-fill-cx: calc(var(--swatch-pill-pad-x) + var(--swatch-pill-dot) / 2 - var(--swatch-pill-inset));clip-path:circle(calc(var(--swatch-pill-dot) / 2 + 0%) at var(--swatch-fill-cx) 50%)}[dir=rtl] .swatch-pill__fill{--swatch-fill-cx: calc(100% - var(--swatch-pill-pad-x) - var(--swatch-pill-dot) / 2 + var(--swatch-pill-inset))}@keyframes swatch-fill-spread{0%{clip-path:circle(calc(var(--swatch-pill-dot) / 2 + 0%) at var(--swatch-fill-cx) 50%)}to{clip-path:circle(calc(0px + 150%) at var(--swatch-fill-cx) 50%)}}@keyframes swatch-check-pop{0%{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}.is-variant-swapping .swatch-pill__fill{animation:none!important;clip-path:circle(calc(var(--swatch-pill-dot) / 2 + 0%) at var(--swatch-fill-cx) 50%)!important}.is-variant-swapping .swatch-pill__check{animation:none!important;opacity:0!important;transform:scale(.3) rotate(-25deg)!important}.swatch-pill__dot{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:var(--swatch-pill-dot);height:var(--swatch-pill-dot);border-radius:9999px;background:var(--swatch-bg);background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(var(--colors-line-and-border),.18);transition:box-shadow .3s var(--swatch-pill-ease)}.swatch-pill__check{display:block;width:90%;height:90%;color:var(--swatch-fg);opacity:0;transform:scale(.3) rotate(-25deg)}.swatch-pill__check svg{display:block;width:100%;height:100%;fill:none}.swatch-pill__name{position:relative;z-index:1;white-space:nowrap}.swatch-pill__spinner{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}.swatch-pill__badge{position:absolute;z-index:2;bottom:calc(100% + .35rem);left:0;font-style:italic;font-size:.6875rem;line-height:1;white-space:nowrap;color:rgba(var(--colors-heading),1);pointer-events:none}[dir=rtl] .swatch-pill__badge{left:auto;right:var(--swatch-pill-pad-x)}.swatch-pill:hover{border-color:rgba(var(--colors-heading),.45)}.input-radio:focus-visible+.swatch-pill{box-shadow:0 0 0 3px rgba(var(--colors-heading),.25)}.input-radio:checked+.swatch-pill{border-color:rgba(var(--colors-heading),1);color:var(--swatch-fg);background-color:#fff}.input-radio:checked+.swatch-pill .swatch-pill__fill{clip-path:circle(calc(0px + 150%) at var(--swatch-fill-cx) 50%);animation:swatch-fill-spread var(--swatch-pill-duration) var(--swatch-pill-ease)}.input-radio:checked+.swatch-pill .swatch-pill__dot{background:none;box-shadow:inset 0 0 0 1px rgba(var(--colors-line-and-border),0)}.input-radio:checked+.swatch-pill .swatch-pill__check{opacity:1;transform:scale(1) rotate(0);animation:swatch-check-pop .38s cubic-bezier(.34,1.56,.64,1) .3s backwards}.input-radio.disabled+.swatch-pill{opacity:.45}.input-radio.disabled+.swatch-pill .swatch-pill__name{text-decoration:line-through}@media(prefers-reduced-motion:reduce){.swatch-pill,.swatch-pill__fill,.swatch-pill__dot,.swatch-pill__check{transition-duration:1ms!important;animation-duration:1ms!important}}@media(max-width:768px){.swatch-pill.swatch-pill--badge-row{font-size:14px}.swatch-pill{--swatch-pill-dot: .9rem}}
/*# sourceMappingURL=/cdn/shop/t/59/assets/component-swatch-pill.css.map */