.cube-loader{--cube-size: 75px;--cube-depth: calc(var(--cube-size) / 2);--cube-loader-side-start: hsl(0, 0%, 58%);--cube-loader-side-end: hsl(0, 0%, 92%);--cube-loader-top: hsl(0, 0%, 97%);position:relative;width:var(--cube-size);height:var(--cube-size);overflow:visible;perspective:max(calc(var(--cube-size) * 8),140px);perspective-origin:center center}.dark .cube-loader{--cube-loader-side-start: #111111;--cube-loader-side-end: hsl(0, 0%, 80%);--cube-loader-top: hsl(0, 0%, 90%)}.cube-loader-stage{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-30deg)}.cube-loader-spin{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;animation:cube-loader-spin 4s linear infinite}.cube-loader.paused .cube-loader-spin{animation-play-state:paused}@keyframes cube-loader-spin{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.cube-loader .cube-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d}.cube-loader .cube-wrapper .cube-span{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;transform:rotateY(calc(90deg * var(--i))) translateZ(var(--cube-depth));background:linear-gradient(to top,var(--cube-loader-side-start) 0%,var(--cube-loader-side-end) 100%)}.cube-loader .cube-top{position:absolute;width:var(--cube-size);height:var(--cube-size);backface-visibility:hidden;background:var(--cube-loader-top);transform:rotateX(90deg) translateZ(var(--cube-depth));transform-style:preserve-3d}