:root {
    --color: #1A6CFF;
    --shadow-color: #EAF0F6;
    --stroke-to-radius: 0.15;
    --radius: calc(100% / (2 + var(--stroke-to-radius)));
    --stroke: calc(var(--stroke-to-radius) * var(--radius));
    --stroke-dasharray: calc(2 * pi * var(--radius));
    --svg-offset: calc(var(--radius) + var(--stroke) / 2);
}

.svg-container {
    width: 7rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svg-container-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: opacity 0.6s ease;
}

.svg-shadow {
    fill: none;
    stroke: var(--shadow-color);
    stroke-width: var(--stroke);
    stroke-linecap: butt;
    transform: translate(var(--svg-offset), var(--svg-offset));
    stroke-dasharray: var(--stroke-dasharray);
}

.svg-track {
    fill: none;
    stroke: var(--color);
    stroke-width: var(--stroke);
    stroke-linecap: butt;
    stroke-dasharray: var(--stroke-dasharray);
    transform: translate(var(--svg-offset), var(--svg-offset));
    transition: stroke-dashoffset 0.3s ease;
}

.svg-animating {
    animation: progress-animation 1s linear infinite;
}

@keyframes progress-animation {
    from {
        stroke-dashoffset: var(--stroke-dasharray);
    }
}