@import "../variables";
@import "../colors";

$circle_progress_loader_size: 18px;
$circle_progress_loader_border-width: 2px;

.CircleProgressLoader {
    display: inline-block;
    height: $circle_progress_loader_size;
    position: relative;
    width: $circle_progress_loader_size;

    &::before {
        border: $circle_progress_loader_border-width solid $color_control_border_secondary;
        border-radius: 50%;
        box-sizing: border-box;
        content: "";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        transition: $toggle_transition;
        width: 100%;
        z-index: 1;
    }

    &-loading::before,
    &-pending::before {
        opacity: 1;
    }
}

.CircleProgressLoader-symbol {
    display: block;
    fill: none;
    position: relative;
    stroke: $color_success;
    transform: rotate(0);
    z-index: 2;

    .CircleProgressLoader-loading & {
        opacity: 1;
        transition: stroke-dashoffset .15s linear;
    }

    .CircleProgressLoader-loaded & {
        opacity: 0;
        transition: $toggle_transition;
    }

    .CircleProgressLoader-pending & {
        animation: rotation linear 1.2s infinite .4s;
    }
}

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