@keyframes progressing{
    from {
        width: 10%;
        opacity: 0.8;
    }

    50% {
        width: 100%;
        opacity: 0.2;
    }

    60%{
        width: 100%;
        opacity: 0;
    }

    to {
        width: 0%;
        opacity: 0;
    }
}
@keyframes ring-progressing{
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

mor-progress{
    display: block;

    .progress-wrap{
        display: flex;
        font-size: 0;

        .track{
            position: relative;
        }

        .line-track{
            display: flex;
            height: @fontSize*0.5;
            border-radius: @fontSize;
            width: 100%;
            background: @colorNeutral1;
            margin: @fontSize*0.25 0;
            vertical-align: top;
        }

        .main{
            display: block;
            border-radius: @fontSize;
            width: 50%;
            height: 100%;
            background: @colorNeutral7;
            transition: width 0.2s, color 0.2s;
            position: relative;
            z-index: 2;

            &.done{
                background: @colorSuccess !important;
            }

            &.fail{
                background: @colorDanger !important;
            }

            &.status-failed{
                background: @colorDanger !important;
            }

            &.status-success{
                background: @colorSuccess !important;
            }

            &.status-warning{
                background: @colorWarning !important;
            }

            .progressing{
                width: 0%;
                height: 100%;
                opacity: 0;
                border-radius: @fontSize;
                background: ~'linear-gradient(-90deg, #fffe 0%, #fffa 20%, #fff1)';
                animation: 2.4s cubic-bezier(0.23, 0.48, 0.5, 1.04) infinite progressing;
            }
        }

        .note{
            display: flex;
            padding-left: 10px;
            font-size: @fontSize*0.8125;
            vertical-align: top;
            position: relative;
            color: @colorBlack;
            line-height: @fontSize;
            width: 20%;

            .mo-icon-error-cf{
                color: @colorDanger;
            }

            .mo-icon-correct-cf{
                color: @colorSuccess;
            }

            .mo-icon-warn-f{
                color: @colorWarning;
            }
        }

        .ring-track{
            svg{
                path{
                    stroke-linecap: round;
                    stroke-width: 6px;
                    fill-opacity: 0;
                }

                .track-bg{
                    stroke: @colorNeutral1;
                }

                .main{
                    stroke: @colorNeutral7;
                    transition: stroke-dasharray 0.2s, stroke-opacity 0.2s;

                    &.done{
                        stroke: @colorSuccess !important;
                    }

                    &.fail{
                        stroke: @colorDanger !important;
                    }

                    &.status-failed{
                        stroke: @colorDanger !important;
                    }

                    &.status-success{
                        stroke: @colorSuccess !important;
                    }

                    &.status-warning{
                        stroke: @colorWarning !important;
                    }
                }

                .progressing{
                    opacity: 0.65;
                    transform: rotate(0deg);
                    transform-origin: center center;
                    animation: 2.4s linear infinite ring-progressing;
                }
            }
        }

        .marks{
            padding: 0;
            margin: 0;
            list-style: none;
            font-size: 0;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            height: 100%;

            li{
                display: inline-block;
                left: 0;
                top: 0;
                height: 100%;
                font-size: @fontSize;
                border-radius: 10em;
                background: @colorNeutral4;
                position: absolute;
                margin: 0;

                &.co-t{
                    background: @colorTheme;
                }

                &.co-lt{
                    background: @colorLightTheme;
                }

                &.co-dt{
                    background: @colorDarkTheme;
                }

                &.co-s{
                    background: @colorSuccess;
                }

                &.co-w{
                    background: @colorWarning;
                }

                &.co-d{
                    background: @colorDanger;
                }

                &.co-p{
                    background: @colorPrimary;
                }

                &.co-m{
                    background: @colorMinor;
                }

                &.co-i{
                    background: @colorInfo;
                }

                each(range(11), {
                    @colorName : 'colorNeutral@{value}';

                    &.co-n@{value}{
                        background: @@colorName;
                    }
                });
            }
        }
    }

    &.note-in-left{
        .progress-wrap .note{
            justify-content: flex-end;
            padding-left: 0;
            padding-right: 10px;
        }
    }

    &.type-ring{
        .progress-wrap{
            position: relative;
            display: block;
        }

        .note{
            padding: 0;
            width: 80%;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: @fontSize*1.5;
            display: inline-block;

            .mo-icon{
                transform: scale(2.4);
                display: block;
            }
        }
    }

    &.co-t{
        .progress-wrap .main{
            background: @colorTheme;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorTheme;
        }
    }

    &.co-lt{
        .progress-wrap .main{
            background: @colorLightTheme;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorLightTheme;
        }
    }

    &.co-dt{
        .progress-wrap .main{
            background: @colorDarkTheme;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorDarkTheme;
        }
    }

    &.co-s{
        .progress-wrap .main{
            background: @colorSuccess;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorSuccess;
        }
    }

    &.co-w{
        .progress-wrap .main{
            background: @colorWarning;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorWarning;
        }
    }

    &.co-d{
        .progress-wrap .main{
            background: @colorDanger;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorDanger;
        }
    }

    &.co-p{
        .progress-wrap .main{
            background: @colorPrimary;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorPrimary;
        }
    }

    &.co-m{
        .progress-wrap .main{
            background: @colorMinor;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorMinor;
        }
    }

    &.co-i{
        .progress-wrap .main{
            background: @colorInfo;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorInfo;
        }
    }

    &.co-bk{
        .progress-wrap .main{
            background: @colorBlack;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorBlack;
        }
    }

    each(range(11), {
        @colorName : 'colorNeutral@{value}';

        &.co-n@{value}{
            .line-track when (@value <= 5) {
                background: @colorNeutral10;
            }

            .progress-wrap .ring-track svg .track-bg when (@value <= 5) {
                background: @colorNeutral10;
            }

            .progress-wrap .main{
                background: @@colorName;
            }

            .progress-wrap .ring-track svg .main{
                stroke: @@colorName;
            }

            .progress-wrap .note{
                color: if((@value > 5), @colorBlack, @colorWhite);
            }
        }
    });

    &.co-wh{
        .line-track,
        .progress-wrap .ring-track svg .track-bg{
            background: @colorNeutral10;
        }

        .progress-wrap .main{
            background: @colorWhite;
        }

        .progress-wrap .ring-track svg .main{
            stroke: @colorWhite;
        }

        .progress-wrap .note{
            color: @colorWhite;
        }
    }

    // default status
    &{
        .co-t;
    }
}