#tsq-spinner-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:999999;transition:opacity .12s ease}
.tsq-spinner-host{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;--tsq-stroke:3px}

/* Ring */
.tsq-spinner-host[data-style="ring"]::before{
  content:"";box-sizing:border-box;width:100%;height:100%;
  border:var(--tsq-stroke) solid currentColor;border-bottom-color:transparent;border-radius:50%;
  animation:tsq-rotate .8s linear infinite
}

/* Dual Ring */
.tsq-spinner-host[data-style="dual-ring"]::before{
  content:"";display:inline-block;width:100%;height:100%;
  border:var(--tsq-stroke) solid currentColor;border-radius:50%;
  border-color:currentColor transparent currentColor transparent;
  animation:tsq-rotate .9s linear infinite
}

/* Dots */
.tsq-spinner-host[data-style="dots"]{display:inline-flex;gap:6px}
.tsq-spinner-host[data-style="dots"] i{display:inline-block;width:.25em;height:.25em;background:var(--c1,currentColor);border-radius:50%;animation:tsq-bounce .8s infinite alternate}
.tsq-spinner-host[data-style="dots"] i:nth-child(2){background:var(--c2,currentColor);animation-delay:.2s}
.tsq-spinner-host[data-style="dots"] i:nth-child(3){background:var(--c3,currentColor);animation-delay:.4s}

/* Bars */
.tsq-spinner-host[data-style="bars"]{display:inline-flex;gap:.2em;align-items:end}
.tsq-spinner-host[data-style="bars"] i{display:inline-block;width:.22em;height:.7em;background:var(--c1,currentColor);animation:tsq-bars .8s infinite ease-in-out}
.tsq-spinner-host[data-style="bars"] i:nth-child(2){background:var(--c2,currentColor);animation-delay:.1s}
.tsq-spinner-host[data-style="bars"] i:nth-child(3){background:var(--c3,currentColor);animation-delay:.2s}
.tsq-spinner-host[data-style="bars"] i:nth-child(4){background:var(--c4,currentColor);animation-delay:.3s}

/* Pulse */
.tsq-spinner-host[data-style="pulse"]::before{
  content:"";display:block;width:100%;height:100%;background:currentColor;border-radius:50%;animation:tsq-pulse 1s ease-in-out infinite
}

/* Ripple */
.tsq-spinner-host[data-style="ripple"]{position:relative}
.tsq-spinner-host[data-style="ripple"]::before,
.tsq-spinner-host[data-style="ripple"]::after{
  content:"";position:absolute;inset:0;border:var(--tsq-stroke) solid currentColor;border-radius:50%;
  animation:tsq-ripple 1.25s ease-out infinite;opacity:.8
}
.tsq-spinner-host[data-style="ripple"]::after{animation-delay:.625s}

/* Hourglass */
.tsq-spinner-host[data-style="hourglass"]::before{
  content:"";box-sizing:border-box;width:100%;height:100%;
  border:var(--tsq-stroke) solid currentColor;border-radius:50%;
  clip-path: polygon(0% 0%,100% 0%,100% 40%,50% 60%,0% 40%);
  animation:tsq-rotate 1s linear infinite
}

/* Tail */
.tsq-spinner-host[data-style="tail"]::before{
  content:"";box-sizing:border-box;width:100%;height:100%;
  border:var(--tsq-stroke) solid transparent;border-top-color:currentColor;border-right-color:currentColor;border-radius:50%;
  animation:tsq-rotate .7s linear infinite;filter: drop-shadow(0 0 1px currentColor)
}

/* Cube */
.tsq-spinner-host[data-style="cube"]{transform:rotate(45deg)}
.tsq-spinner-host[data-style="cube"] i{display:block;width:45%;height:45%;background:var(--c1,currentColor);opacity:.85;animation:tsq-cube 1s ease-in-out infinite}
.tsq-spinner-host[data-style="cube"] i:nth-child(2){background:var(--c2,currentColor);animation-delay:.1s}
.tsq-spinner-host[data-style="cube"] i:nth-child(3){background:var(--c3,currentColor);animation-delay:.2s}
.tsq-spinner-host[data-style="cube"] i:nth-child(4){background:var(--c4,currentColor);animation-delay:.3s}

/* Animations */
@keyframes tsq-rotate{to{transform:rotate(360deg)}}
@keyframes tsq-bounce{0%{transform:translateY(0);opacity:.6}100%{transform:translateY(-40%);opacity:1}}
@keyframes tsq-bars{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
@keyframes tsq-pulse{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1);opacity:1}}
@keyframes tsq-ripple{0%{transform:scale(.2);opacity:.9}80%{opacity:.2}100%{transform:scale(1);opacity:0}}
@keyframes tsq-cube{0%,100%{transform:translate(0,0)}25%{transform:translate(55%,0)}50%{transform:translate(55%,55%)}75%{transform:translate(0,55%)}}