/* ANALYTICS */
.pie-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--color-cyan-500) 0% 65%,
            var(--color-magenta-500) 65% 85%,
            var(--color-void-200) 85% 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-chart::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--color-void-50);
    border-radius: 50%;
}

.pie-chart-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.sparkline {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.sparkline.up {
    stroke: var(--color-lime-500);
    filter: drop-shadow(0 0 5px rgba(132, 204, 22, 0.4));
}

.sparkline.down {
    stroke: var(--color-magenta-500);
    filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.4));
}