CircularProgressBar.scss

.deriv-circular-progress {
    position: relative;
    line-height: 0;
    width: fit-content;

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    &__bar {
        transform: scaleX(-1) rotate(-90deg);
        transform-origin: 50% 50%;
        transition: stroke-dashoffset 1s;
        stroke: var(--du-brand-secondary, #85acb0);

        &--warning {
            stroke: var(--du-status-warning, #ffad3a);
        }

        &--danger {
            stroke: var(--du-status-danger, #ec3f3f)
        }
    }

    &--clockwise {
        transform: rotate(-90deg);
    }

    &__icon {
        position: absolute;
        width: 1.6rem;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}