/* app.css
   Entry point
*/

@import url("styles/tokens.css");
@import url("styles/base.css");
@import url("styles/layout.css");
@import url("styles/buttons.css");
@import url("styles/forms.css");
@import url("styles/topbar.css");
@import url("styles/picker.css");
@import url("styles/status.css");
@import url("styles/report-page.css");
@import url("styles/report-form.css");
@import url("styles/overview.css");
@import url("styles/settings.css");

#app {
    min-height: 100vh;
}

.loading-progress {
    width: 3rem;
    height: 3rem;
    display: block;
    margin: 5rem auto 0.75rem;
    animation: loading-spin 1s linear infinite;
}

.loading-progress circle {
    fill: none;
    stroke-width: 0.45rem;
    transform-origin: center;
}

.loading-progress circle:first-child {
    stroke: var(--accent-soft);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-dasharray: 90 160;
    stroke-dashoffset: 0;
}

.loading-progress-text {
    text-align: center;
    color: var(--text-subtle);
    font-size: 0.85rem;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}