// 进度条
// 文档结构如下：
// <div class="progress"><div>50%</div></div>
._progress(@height: 20px, @radius: @height * .5, @progress_bar: '>:first-child') {
    overflow: hidden;
    height: @height;
    font-size: @height * .6;
    border-radius: @radius;
    .transition(all .3s linear);

    @progress_bar_selector: e(@progress_bar);
    @{progress_bar_selector} {
        display: block;
        height: 100%;
        line-height: @height;
        font-size: inherit;
        text-align: center;
        color: inherit;
        .border-radius(@radius);
        .transition(all .3s linear);
    }
}
._progress-color(@color, @progress_bar: '>:first-child') {
    // 颜色可以为一个数组
    // 第一个是进度条的颜色
    // 第二个是背景的颜色
    // 第三个是字体的颜色
    .getColor(@color) when (iscolor(@color)) {
        @bar_color: @color;
        @bg_color: @progress_defalut_background_color;
        @font_color: contrast(@bar_color, black, white, 60%); //根据进度条颜色的深浅判断字体颜色为白色还是黑色
    }
    .getColor(@color) when (length(@color) = 2) {
        @bar_color: extract(@color, 1);
        @bg_color: extract(@color, 2);
        @font_color: contrast(@bar_color, black, white, 60%);
    }
    .getColor(@color) when (length(@color) = 3) {
        @bar_color: extract(@color, 1);
        @bg_color: extract(@color, 2);
        @font_color: extract(@color, 3);
    }
    .getColor(@color);

    @font_shadow_color: contrast(@font_color, black, white, 60%); //根据字体色的深浅判断字体阴影色为白色还是黑色

    background-color: @bg_color;
    color: @font_color;

    @progress_bar_selector: e(@progress_bar);
    @{progress_bar_selector} {
        background-color: @bar_color;
        text-shadow: 0 1px 0 fade(@font_shadow_color, 60%);
    }
}

// 扁平进度条
.progress-flat-color(@color, @progress_bar: '>:first-child') {
    ._progress-color(@color, @progress_bar);
}
.progress-flat(@color: @blue, @height: 20px, @radius: @height * .5, @progress_bar: '>:first-child') {
    ._progress(@height, @radius, @progress_bar);
    .progress-flat-color(@color, @progress_bar);
    .box-shadow(inset 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .4), 0 -1px 0 rgba(255, 255, 255, .4););

    @progress_bar_selector: e(@progress_bar);
    @{progress_bar_selector} {
        .box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .2));
    }
}

// 带条纹的进度条
.progress-striped-color(@color, @progress_bar: '>:first-child') {
    ._progress-color(@color, @progress_bar);
}
.progress-striped(@color: @blue, @height: 20px, @radius: @height * .5, @progress_bar: '>:first-child') {
    .progress-flat(@color, @height, @radius, @progress_bar);

    @progress_bar_selector: e(@progress_bar);
    @{progress_bar_selector} {
        .gradient-striped();
        background-size: 40px 40px;
    }
}
.progress-striped-animation(@color: @blue, @height: 20px, @radius: @height * .5, @progress_bar: '>:first-child', @animation_name: animation-progress-striped) {
    .progress-striped(@color, @height, @radius);

    @progress_bar_selector: e(@progress_bar);
    @{progress_bar_selector} {
        .animation(@animation_name 2s linear infinite);
    }

    & when (@prefix = true) {
        @-webkit-keyframes @animation_name { .keyframes; }
        @-moz-keyframes @animation_name { .keyframes; }
    }

    @keyframes @animation_name { .keyframes; }

    .keyframes() {
        from { background-position: 40px 0; }
        to   { background-position: 0 0; }
    }
}

// 弧面进度条
.progress-arc-color(@color, @progress_bar: '>:first-child') {
    @new_color: darken(@color, max(lightness(@color)-90%,0%));
    @bg_color: lighten(@new_color, max(10%-lightness(@new_color),0%));
    @bg_color_lighten: lighten(@bg_color, 10%);
    @bg_color_darken: darken(@bg_color, 10%);

    ._progress-color(@bg_color, @progress_bar);

    @progress_bar_selector: e(@progress_bar);
    @{progress_bar_selector} {
        .gradient-y(@bg_color_lighten, @bg_color_darken);
    }
}
.progress-arc(@color: @blue, @height: 20px, @radius: @height * .5, @progress_bar: '>:first-child') {
    ._progress(@height, @radius, @progress_bar);
    .progress-arc-color(@color, @progress_bar);
    .box-shadow(inset 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .4), 0 -1px 0 rgba(255, 255, 255, .4););

    @progress_bar_selector: e(@progress_bar);
    @{progress_bar_selector} {
        .box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 @height*.3 0 rgba(255, 255, 255, .2););
    }
}

// 镂空进度条
.progress-hollow-color(@color, @progress_bar: '>:first-child') {
    ._progress-color(@color, @progress_bar);
    .box-shadow(0 0 0 .1em @bar_color);
    border-color: @bg_color;
}
.progress-hollow(@color: @blue, @height: 20px, @radius: @height * .5, @progress_bar: '>:first-child') {

    @border_width: round(@height * .1);
    @inner_height: @height - @border_width * 2;

    ._progress(@inner_height, @radius, @progress_bar);
    .progress-hollow-color(@color, @progress_bar);

    border-width: @border_width;
    border-style: solid;
    font-size: @height * .6;
}