/* A separate modal places the loading mask above the email-code dialog too. */
.auth-loading{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;overscroll-behavior:contain;outline:none;z-index:1000;cursor:wait}
.auth-loading[open]{display:grid;place-items:center}
.auth-loading::backdrop{background:rgba(0,0,0,.75)}
.auth-loading[open]:not(:modal){background:rgba(0,0,0,.75)}
html:has(.auth-loading[open]){overflow:hidden}
.auth-loading-spinner{position:relative;width:72px;height:72px;flex:none}
.auth-loading-spinner span{position:absolute;top:2px;left:33px;width:6px;height:18px;border-radius:4px;background:#fff;transform-origin:3px 34px;transform:rotate(calc(var(--segment) * 30deg));opacity:calc(.2 + var(--segment) / 15);animation:auth-loading-fade 1s linear infinite;animation-delay:calc(var(--segment) * .083333s - 1s)}
.auth-loading-spinner span:nth-child(1){--segment:0}
.auth-loading-spinner span:nth-child(2){--segment:1}
.auth-loading-spinner span:nth-child(3){--segment:2}
.auth-loading-spinner span:nth-child(4){--segment:3}
.auth-loading-spinner span:nth-child(5){--segment:4}
.auth-loading-spinner span:nth-child(6){--segment:5}
.auth-loading-spinner span:nth-child(7){--segment:6}
.auth-loading-spinner span:nth-child(8){--segment:7}
.auth-loading-spinner span:nth-child(9){--segment:8}
.auth-loading-spinner span:nth-child(10){--segment:9}
.auth-loading-spinner span:nth-child(11){--segment:10}
.auth-loading-spinner span:nth-child(12){--segment:11}
@keyframes auth-loading-fade{0%{opacity:1}100%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.auth-loading-spinner span{animation:none}}

.auth-loading-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}