.spinner {
    animation: spin 1800ms infinite alternate ease-in-out, grow 900ms infinite alternate ease-in-out;
    transform: rotate(-90deg);
    transform-origin: center;
}

@keyframes spin {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -95;
    }
}

@keyframes grow {
    from {
        stroke-dasharray: 5 100;
    }
    to {
        stroke-dasharray: 25 100;
    }
}

.chart-wrapper .spinner-container {
    opacity: 0;
    transition: opacity 200ms ease-out;
    transition-delay: 100ms;
}

.chart-wrapper.htmx-request .spinner-container {
    opacity: 1;
}

.chart-wrapper .chart {
    transition: opacity 200ms ease-out;
    opacity: 1;
}

.chart.htmx-added {
    opacity: 0;
}

.chart-wrapper.htmx-settling .chart {
    opacity: 0;
}

.chart-wrapper.htmx-request .chart {
    opacity: 0;
}