.morphing-page-dots{--mpd-fg: #fff;--mpd-muted: rgba(255, 255, 255, .4);--mpd-arrow: #fff;--mpd-dot-size: 8px;--mpd-dot-active-width: 24px;--mpd-dot-gap: 8px;--mpd-transition-duration: .4s}.mpd--light{--mpd-fg: #1a1a1a;--mpd-muted: rgba(0, 0, 0, .35);--mpd-arrow: #1a1a1a}.morphing-page-dots{display:flex;align-items:center;gap:16px;justify-content:center}.mpd__arrow{background:none;border:none;padding:8px;cursor:pointer;color:var(--mpd-arrow);display:flex;align-items:center;justify-content:center;transition:opacity .2s ease,transform .2s ease;opacity:.8}.mpd__arrow:hover:not(:disabled){opacity:1;transform:scale(1.1)}.mpd__arrow:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.mpd__arrow:focus-visible{outline:2px solid var(--mpd-fg);outline-offset:2px;border-radius:var(--wcwy-radius)}.mpd__arrow svg{width:20px;height:20px;display:block}.mpd__dots{display:flex;align-items:center;gap:var(--mpd-dot-gap)}.mpd__dot{position:relative;width:var(--mpd-dot-size);height:var(--mpd-dot-size);padding:0;background:var(--mpd-muted);border:none;border-radius:50%;cursor:pointer;transition:width var(--mpd-transition-duration) cubic-bezier(.4,0,.2,1),background-color .3s ease,opacity .3s ease;overflow:hidden}.mpd__dot:hover:not(.is-active){background:var(--mpd-muted);opacity:.8}.mpd__dot:focus-visible{outline:2px solid var(--mpd-fg);outline-offset:3px}.mpd__dot.is-active{width:var(--mpd-dot-active-width);border-radius:var(--wcwy-radius);background:var(--mpd-fg)}.mpd__ripple{position:absolute;top:50%;left:50%;width:100%;height:100%;background:var(--mpd-fg);border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}.mpd__dot.is-rippling .mpd__ripple{animation:mpd-ripple .6s cubic-bezier(.4,0,.2,1)}@keyframes mpd-ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:.6}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}@media(prefers-reduced-motion:reduce){.morphing-page-dots{--mpd-transition-duration: .15s}.mpd__dot.is-rippling .mpd__ripple{animation:none}.mpd__arrow:hover:not(:disabled){transform:none}}@media only screen and (max-width:768px){.morphing-page-dots{gap:12px}.mpd__arrow{padding:6px}.mpd__arrow svg{width:18px;height:18px}.morphing-page-dots{--mpd-dot-size: 6px;--mpd-dot-active-width: 20px;--mpd-dot-gap: 6px}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/morphing-page-dots.css.map */