.rio-progress-circle {
    // Pointer events are only enabled for the filled part of the circle
    pointer-events: none;

    stroke: var(--rio-local-bg);

    // For some reason, `align-items: center` makes the spinner grow. So we
    // can't use `@include center-content()` here.
    display: flex;
    justify-content: center;
    align-items: center;

    // Since the svg inside is rotating, the corners of its bounding box will
    // stick out. This can cause frequent re-layouting. To prevent this, we
    // hide the overflow.
    overflow: hidden;
}

.rio-progress-circle svg {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
}

.rio-progress-circle circle {
    pointer-events: auto;
    fill: none;
    stroke-width: 3.5;
    color: var(--rio-local-bg);
}

.spinning svg {
    transform-origin: center;
    animation: rotate 2s linear infinite;
}

.spinning .progress {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

.rio-progress-circle:not(.spinning) .progress {
    stroke-dashoffset: -94.25;
    stroke-dasharray: var(--dasharray);
    transition: stroke-dasharray 0.5s ease;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dashoffset: -125px;
    }
}
