/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

@include export("progress") {
    #{$progress-class} {
        overflow: hidden;
        position: relative;

        @include is-small {
            #{$progress-class-bar} {
                height: 1rem;
                line-height: 1rem;
                font-size: $small-size;
            }
        }

        @include is-large {
            #{$progress-class-bar} {
                height: 2rem;
                line-height: 2rem;
                font-size: $large-size;
            }
        }

        @include clear-fix;

        //----- Effects ------//

        &#{$shape-round-class} {
            #{$progress-class-bar}:first-child {
                border-top-#{$align-direction}-radius: $round;
                border-bottom-#{$align-direction}-radius: $round;
            }
        }

        @if index($progress-effects, "pill") {
            &#{$shape-pill-class} {
                border-radius: $pill;

                #{$progress-class-bar}:first-child {
                    border-top-#{$align-direction}-radius: $pill;
                    border-bottom-#{$align-direction}-radius: $pill;
                }
            }
        }
    }

    #{$progress-class-bar} {
        height: 1.5rem;
        line-height: 1.5rem;
        overflow: hidden;
        position: relative;
        text-align: center;
        font-size: $medium-size;
        float: $align-direction;
        transition: width $progress-transition, background $progress-transition;
    }
}