// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________

@progress__border-color: @color-gray80;
@progress__color: @color-gray98;

@progress-bar__background-color: @color-success;
@progress-bar__color: @color-white;
@progress-bar__height: 3rem;

//
//  Progress bars
//  _____________________________________________

//
//  Bar animations
//  ---------------------------------------------

//  WebKit
@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 4rem 0;
    }

    to {
        background-position: 0 0;
    }
}

//  Spec and IE10 +
@keyframes progress-bar-stripes {
    from {
        background-position: 4rem 0;
    }

    to {
        background-position: 0 0;
    }
}

//
//  Bar
//  ---------------------------------------------

//  Outer container
.progress {
    background-color: @progress__color;
    border: 1px solid @progress__border-color;
    clear: left;
    height: @progress-bar__height;
    margin-bottom: @progress-bar__height;
    overflow: hidden;
}

//  Bar of progress
.progress-bar {
    background-color: @progress-bar__background-color;
    color: @progress-bar__color;
    float: left;
    font-size: @small__font-size;
    height: 100%;
    line-height: @progress-bar__height;
    text-align: center;
    transition: width .6s ease;
    width: 0;
}

//  Call animation for the active one
.progress-bar {
    &.active {
        .animation(progress-bar-stripes 2s linear infinite);
    }
}

.progress-bar-text-description {
    margin-bottom: 1.6rem;
}

.progress-bar-text-progress {
    text-align: right;
}