@import '../default/var';
// @import './icon';
.#{$prefix}-progress {
    @each $type in success,
    error,
    running {
        $color: map-get($progress-colors, $type);
        &--#{$type} {
            .#{$prefix}-progress__inner {
                stroke: $color;
                &__bar {
                    background: $color;
                }
                @if ($type !=running) {
                    &__text [class*='icon'] {
                        color: $color;
                        font-size: 22px;
                    }
                    &__mask [class*='icon'] {
                        color: $color;
                    }
                }
            }
        }
    }
    &__inner {
        &--back {
            stroke: #f0f0f0;
        }
        &__mask {
            color: #333;
        }
    }
    $sizes: (large: 120px, medium: 90px, small: 60px, mini: 30px);
    @each $ss in large,
    medium,
    small,
    mini {
        $s: map-get($sizes, $ss);
        &--#{$ss} {
            &.#{$prefix}-progress--circle {
                width: $s;
                height: $s;
                .#{$prefix}-progress__inner {
                    width: $s;
                    height: $s;
                    &__mask {
                        width: $s * 4 / 5;
                        height: $s * 4 / 5;
                        line-height: $s * 4 / 5;
                        left: $s / 10;
                        top: $s / 10;
                        font-size: $s / 5;
                        [class*='icon'] {
                            font-size: $s / 4;
                            line-height: $s * 4 / 5;
                        }
                    }
                }
            }
            &.#{$prefix}-progress--line {
                width: 100%;
                height: $s / 2;
                padding: ($s * 6.5/30) 60px ($s * 6.5/30) 0;
                .#{$prefix}-progress__inner {
                    height: $s / 15;
                    border-radius: $s / 30;
                    &__bar {
                        height: $s / 15;
                        border-radius: $s / 30;
                    }
                }
            }
        }
    }
    &--circle {
        .#{$prefix}-progress__inner {
            position: absolute;
            border-radius: 50%;
            &__mask {
                border-radius: 50%;
                background: #fff;
                position: absolute;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
            }
        }
    }
    &--line {
        position: relative;
        .#{$prefix}-progress__inner {
            background: #f0f0f0;
            border-radius: 4px;
            border-radius: 4px;
            height: 8px;
            &__text {
                width: 50px;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}