@import "../var.scss";

$j-prefix-progress: "#{$j-prefix}-progress" !default;
$j-prefix-progress-percent: "#{$j-prefix}-progress-percent" !default;
$j-prefix-progress-bar: "#{$j-prefix}-progress-bar" !default;
$j-prefix-progress-ring: "#{$j-prefix}-progress-ring" !default;

.#{$j-prefix-progress} {
    position: relative;
    height: 3px;
    border-radius: 5px;
    background: #f3f1f0;
}

.#{$j-prefix-progress-percent} {
    color: #adadad;
    font-size: 14px;
    line-height: 17px;
    font-weight: normal;
    position: absolute;
    right: 0;
    bottom: 5px;
}

.#{$j-prefix-progress-bar} {
    position: absolute;
    width: 0;
    left: 0;
    bottom: 0;
    top: 0;
    background: red;
    transition: all 0.5s ease;
}

.#{$j-prefix-progress-ring} {
    position: relative;

    circle {
        transition: stroke-dashoffset 0.3s;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }
}