/**
 * @file
 * Progress behavior.
 *
 * @see progress.js
 *
 * @todo REFACTOR
 */
.progress
{
    position: relative;
}

.progress__track
{
    min-width: 100px;
    max-width: 100%;
    height: 16px;
    margin-top: 5px;

    border: 1px solid;
    background-color: #fff;
}

.progress__bar
{
    width: 3%;
    min-width: 3%;
    max-width: 100%;
    height: 1.5em;

    background-color: #000;
}

.progress__description,
.progress__percentage
{
    font-size: .875em;

    overflow: hidden;

    margin-top: .2em;

    color: #555;
}

.progress__description
{
    float: left;
    /* LTR */
}

[dir='rtl'] .progress__description
{
    float: right;
}

.progress__percentage
{
    float: right;
    /* LTR */
}

[dir='rtl'] .progress__percentage
{
    float: left;
}

.progress--small .progress__track
{
    height: 7px;
}

.progress--small .progress__bar
{
    height: 7px;

    background-size: 20px 20px;
}

/**
 * Progress bar styles.
 */
.progress-wrapper
{
    margin-bottom: 1rem;
}

.progress-wrapper:last-child .progress
{
    margin-bottom: 5px;
}

.progress-wrapper .message
{
    font-weight: 700;

    margin-bottom: 5px;
}

.progress-wrapper .percentage,
.progress-wrapper .progress-label
{
    font-size: .875rem;
}

.progress-wrapper .progress-bar
{
    min-width: 2em;
}