.progress-circular {
    display: inline-block;
    color: var(--palette-text-secondary);

    &.progress-indeterminate {
        animation: progress-circular-keyframes-circular-rotate 1.4s linear infinite;
    }

    &.progress-static {
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }

    &.progress-small {
        height: 24px;
        width: 24px;
    }

    &.progress-medium {
        height: 40px;
        width: 40px;
    }

    &.progress-large {
        height: 56px;
        width: 56px;
    }
}


.progress-circular-svg {
    display: block;
    transform: rotate(-90deg);
}

.progress-circular-circle {
    stroke: currentColor;

    &.progress-indeterminate {
        animation: progress-circular-keyframes-circular-dash 1.4s ease-in-out infinite;
        stroke-dasharray: 80px, 200px;
        stroke-dashoffset: 0px;
    }

    &.progress-static {
        transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }
}

.progress-circular-disable-shrink {
    animation: none;
}