.pill--container{display:flex;flex-wrap:wrap;gap:10px;justify-content:start;align-items:start}.pill--item{position:relative;display:inline-block;border-radius:calc(var(--buttons-radius-outset));cursor:pointer;perspective:600px;transition:box-shadow .3s ease;line-height:1}.pill--item input{display:none}.pill--item label{position:relative;display:inline-block;padding:10px 15px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.pill--item:has(input:checked):before{content:"";position:absolute;bottom:3px;width:30%;height:2px;background:var(--color-shadow-swatch);border-radius:50%;opacity:.4;animation:shadoweffect 3s ease-in-out infinite;left:35%}.pill--item:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:calc(var(--buttons-radius-outset));pointer-events:none;transform:rotateX(0);transform-origin:bottom center;transition:transform .5s ease;background-color:#ffffff1a;border:2px solid rgba(var(--color-foreground),.8);z-index:0}.pill--item:has(input:checked) label{animation:floatUpDown 3s ease-in-out infinite}.pill--item label{display:inline-block;transition:transform .3s ease,box-shadow .3s ease}@keyframes shadoweffect{0%,to{transform:scale(.8)}50%{transform:scale(1)}}@keyframes floatUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.pill--item:hover label{transform:translateY(-2px)}.pill--item:hover:after{transform:rotateX(40deg)}.pill--item:has(input:checked):after{transform:rotateX(75deg)}.pill--item:not(:has(input:checked)):hover:after{transform:rotateX(40deg)}
/*# sourceMappingURL=/cdn/shop/t/5/assets/new-swatch.css.map */