@layer onyx.component{.onyx-circle-spinner{--indicator-size:1.5rem;--stroke-color:currentColor;max-width:var(--indicator-size);min-width:var(--indicator-size);aspect-ratio:1;animation:onyx-circle-spinner var(--onyx-duration-lg) cubic-bezier(.4, .35, .7, .8) infinite;padding:1px}.onyx-circle-spinner__circle{fill:#0000;stroke-width:2px;stroke-linecap:round;stroke:var(--stroke-color);stroke-dasharray:106.029 35.3429;stroke-dashoffset:35.3429px;animation:onyx-circle-spinner-stroke var(--onyx-duration-lg) cubic-bezier(.4, .35, .7, .8) infinite}@keyframes onyx-circle-spinner{to{transform:rotate(1turn)}}@keyframes onyx-circle-spinner-stroke{0%{stroke-dasharray:106.029 35.3429}75%{stroke-dasharray:35.3429 106.029}to{stroke-dasharray:106.029 35.3429}}.onyx-loading-dots{--indicator-size:1.5rem;--dot-size:calc(.25 * var(--indicator-size));width:var(--indicator-size);aspect-ratio:1;position:relative}.onyx-loading-dots__center{box-shadow:0 var(--dot-size) 0 0;width:var(--dot-size);aspect-ratio:1;border-radius:var(--onyx-radius-full);animation:onyx-loading-dots var(--onyx-duration-lg) infinite linear;animation-delay:calc(var(--onyx-duration-lg) / 6);left:calc(50% - .5 * var(--dot-size));top:calc(50% - 1.5 * var(--dot-size));background-color:#0000;position:absolute}.onyx-loading-dots__center:before,.onyx-loading-dots__center:after{content:"";box-shadow:0 var(--dot-size) 0 0;width:var(--dot-size);aspect-ratio:1;border-radius:var(--onyx-radius-full);animation:onyx-loading-dots var(--onyx-duration-lg) infinite linear;background-color:#0000;position:absolute}.onyx-loading-dots__center:before{left:calc(-.5 * var(--indicator-size) + .5 * var(--dot-size))}.onyx-loading-dots__center:after{right:calc(-.5 * var(--indicator-size) + .5 * var(--dot-size));animation-delay:calc(var(--onyx-duration-lg) / 3)}@keyframes onyx-loading-dots{0%{box-shadow:0 var(--dot-size) 0 0}33%{box-shadow:0 var(--dot-size) 0 calc(-1 * var(--dot-size) / 2)}66%{box-shadow:0 var(--dot-size) 0 calc(-1 * var(--dot-size) / 2)}}}