/*
 * SpinKit 2.0.1 — https://github.com/tobiasahlin/SpinKit
 * Copyright (c) 2015-2020 Tobias Ahlin
 * MIT License. Adapted to inherit the Newquay slider spinner color/size tokens.
 */
.nqrs-spinkit {
    --sk-size: 40px;
    --sk-color: var(--nq-spinner, #fff);
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
}
.nqrs-spinkit > div { box-sizing: border-box; }
.sk-plane { width:var(--sk-size);height:var(--sk-size);background:var(--sk-color);animation:sk-plane 1.2s infinite ease-in-out; }
@keyframes sk-plane { 0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)} }

.sk-chase { width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-chase 2.5s infinite linear both; }
.sk-chase-dot { width:100%;height:100%;position:absolute;inset:0;animation:sk-chase-dot 2s infinite ease-in-out both; }
.sk-chase-dot::before { content:"";display:block;width:25%;height:25%;background:var(--sk-color);border-radius:50%;animation:sk-chase-dot-before 2s infinite ease-in-out both; }
.sk-chase-dot:nth-child(1),.sk-chase-dot:nth-child(1)::before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2),.sk-chase-dot:nth-child(2)::before{animation-delay:-1s}.sk-chase-dot:nth-child(3),.sk-chase-dot:nth-child(3)::before{animation-delay:-.9s}.sk-chase-dot:nth-child(4),.sk-chase-dot:nth-child(4)::before{animation-delay:-.8s}.sk-chase-dot:nth-child(5),.sk-chase-dot:nth-child(5)::before{animation-delay:-.7s}.sk-chase-dot:nth-child(6),.sk-chase-dot:nth-child(6)::before{animation-delay:-.6s}
@keyframes sk-chase{to{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{0%,100%{transform:scale(1)}50%{transform:scale(.4)}}

.sk-bounce { width:var(--sk-size);height:var(--sk-size);position:relative; }
.sk-bounce-dot { width:100%;height:100%;position:absolute;inset:0;border-radius:50%;background:var(--sk-color);opacity:.6;animation:sk-bounce 2s infinite cubic-bezier(.455,.03,.515,.955); }
.sk-bounce-dot:nth-child(2){animation-delay:-1s}@keyframes sk-bounce{0%,100%{transform:scale(0)}45%,55%{transform:scale(1)}}

.sk-wave { width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between; }
.sk-wave-rect { width:15%;height:100%;background:var(--sk-color);animation:sk-wave 1.2s infinite ease-in-out; }
.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1s}.sk-wave-rect:nth-child(4){animation-delay:-.9s}.sk-wave-rect:nth-child(5){animation-delay:-.8s}
@keyframes sk-wave{0%,40%,100%{transform:scaleY(.4)}20%{transform:scaleY(1)}}

.sk-pulse { width:var(--sk-size);height:var(--sk-size);border-radius:50%;background:var(--sk-color);animation:sk-pulse 1.2s infinite cubic-bezier(.455,.03,.515,.955); }
@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}

.sk-flow { width:calc(var(--sk-size)*1.3);height:calc(var(--sk-size)*1.3);display:flex;justify-content:space-between; }
.sk-flow-dot { width:25%;height:25%;border-radius:50%;background:var(--sk-color);animation:sk-flow 1.4s cubic-bezier(.455,.03,.515,.955) infinite both; }
.sk-flow-dot:nth-child(1){animation-delay:-.3s}.sk-flow-dot:nth-child(2){animation-delay:-.15s}@keyframes sk-flow{0%,80%,100%{transform:scale(.3)}40%{transform:scale(1)}}

.sk-swing { width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-swing 1.8s infinite linear; }
.sk-swing-dot { width:45%;height:45%;position:absolute;top:0;left:0;right:0;margin:auto;border-radius:50%;background:var(--sk-color);animation:sk-swing-dot 2s infinite ease-in-out; }
.sk-swing-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-swing{to{transform:rotate(360deg)}}@keyframes sk-swing-dot{0%,100%{transform:scale(.2)}50%{transform:scale(1)}}

.sk-circle,.sk-circle-fade { width:var(--sk-size);height:var(--sk-size);position:relative; }
.sk-circle-dot,.sk-circle-fade-dot { width:100%;height:100%;position:absolute;inset:0; }
.sk-circle-dot::before,.sk-circle-fade-dot::before { content:"";display:block;width:15%;height:15%;border-radius:50%;background:var(--sk-color);animation:sk-circle 1.2s infinite ease-in-out both; }
.sk-circle-fade-dot::before { animation-name:sk-circle-fade; }
.sk-circle-dot:nth-child(1),.sk-circle-fade-dot:nth-child(1){transform:rotate(30deg)}.sk-circle-dot:nth-child(2),.sk-circle-fade-dot:nth-child(2){transform:rotate(60deg)}.sk-circle-dot:nth-child(3),.sk-circle-fade-dot:nth-child(3){transform:rotate(90deg)}.sk-circle-dot:nth-child(4),.sk-circle-fade-dot:nth-child(4){transform:rotate(120deg)}.sk-circle-dot:nth-child(5),.sk-circle-fade-dot:nth-child(5){transform:rotate(150deg)}.sk-circle-dot:nth-child(6),.sk-circle-fade-dot:nth-child(6){transform:rotate(180deg)}.sk-circle-dot:nth-child(7),.sk-circle-fade-dot:nth-child(7){transform:rotate(210deg)}.sk-circle-dot:nth-child(8),.sk-circle-fade-dot:nth-child(8){transform:rotate(240deg)}.sk-circle-dot:nth-child(9),.sk-circle-fade-dot:nth-child(9){transform:rotate(270deg)}.sk-circle-dot:nth-child(10),.sk-circle-fade-dot:nth-child(10){transform:rotate(300deg)}.sk-circle-dot:nth-child(11),.sk-circle-fade-dot:nth-child(11){transform:rotate(330deg)}
.sk-circle-dot:nth-child(1)::before,.sk-circle-fade-dot:nth-child(1)::before{animation-delay:-1.1s}.sk-circle-dot:nth-child(2)::before,.sk-circle-fade-dot:nth-child(2)::before{animation-delay:-1s}.sk-circle-dot:nth-child(3)::before,.sk-circle-fade-dot:nth-child(3)::before{animation-delay:-.9s}.sk-circle-dot:nth-child(4)::before,.sk-circle-fade-dot:nth-child(4)::before{animation-delay:-.8s}.sk-circle-dot:nth-child(5)::before,.sk-circle-fade-dot:nth-child(5)::before{animation-delay:-.7s}.sk-circle-dot:nth-child(6)::before,.sk-circle-fade-dot:nth-child(6)::before{animation-delay:-.6s}.sk-circle-dot:nth-child(7)::before,.sk-circle-fade-dot:nth-child(7)::before{animation-delay:-.5s}.sk-circle-dot:nth-child(8)::before,.sk-circle-fade-dot:nth-child(8)::before{animation-delay:-.4s}.sk-circle-dot:nth-child(9)::before,.sk-circle-fade-dot:nth-child(9)::before{animation-delay:-.3s}.sk-circle-dot:nth-child(10)::before,.sk-circle-fade-dot:nth-child(10)::before{animation-delay:-.2s}.sk-circle-dot:nth-child(11)::before,.sk-circle-fade-dot:nth-child(11)::before{animation-delay:-.1s}
@keyframes sk-circle{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}@keyframes sk-circle-fade{0%,39%,100%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}

.sk-grid { width:var(--sk-size);height:var(--sk-size); }
.sk-grid-cube { float:left;width:33.333%;height:33.333%;background:var(--sk-color);animation:sk-grid 1.3s infinite ease-in-out; }
.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}
@keyframes sk-grid{0%,70%,100%{transform:scale3d(1,1,1)}35%{transform:scale3d(0,0,1)}}

.sk-fold { width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotate(45deg); }
.sk-fold-cube { float:left;width:50%;height:50%;position:relative;transform:scale(1.1); }
.sk-fold-cube::before { content:"";position:absolute;inset:0;background:var(--sk-color);transform-origin:100% 100%;animation:sk-fold 2.4s infinite linear both; }
.sk-fold-cube:nth-child(2){transform:scale(1.1) rotate(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotate(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotate(270deg)}.sk-fold-cube:nth-child(2)::before{animation-delay:.3s}.sk-fold-cube:nth-child(4)::before{animation-delay:.6s}.sk-fold-cube:nth-child(3)::before{animation-delay:.9s}
@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}

.sk-wander { width:var(--sk-size);height:var(--sk-size);position:relative; }
.sk-wander-cube { --sk-wander-distance:calc(var(--sk-size)*.75);position:absolute;top:0;left:0;width:20%;height:20%;background:var(--sk-color);animation:sk-wander 2s ease-in-out -2s infinite both; }
.sk-wander-cube:nth-child(2){animation-delay:-.5s}.sk-wander-cube:nth-child(3){animation-delay:-1s}
@keyframes sk-wander{0%{transform:rotate(0)}25%{transform:translateX(var(--sk-wander-distance)) rotate(-90deg) scale(.6)}50%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)}75%{transform:translateY(var(--sk-wander-distance)) rotate(-270deg) scale(.6)}100%{transform:rotate(-360deg)}}

@media (prefers-reduced-motion: reduce) {
    .nqrs-spinkit * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
