@import "./base/var";
@import "./mixins/index";

@include c(progress) {
    display: inline-block;
    width: 100%;
    font-size: $--font-size-default;
    position: relative;
    box-sizing: border-box;

    @include e(wrap) {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
    }

    @include e(rail) {
        display: inline-block;
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        background-color: $--progress-rail-background-color;
    }

    @include e(bar) {
        box-sizing: border-box;
        position: relative;
        text-align: right;
        background-color: $--color-primary;
        transition: all $--animation-time;
    }

    @include e(inside) {
        color: $--color-white;
        padding-right: 10px;
    }

    @include e(value) {
        display: inline-block;
        margin-left: 5px;
        box-sizing: border-box;
    }

    @include m(show-info) {
        @include e(wrap, false) {
            padding-right: 60px;
            margin-right: -60px;
        }
    }

    @include m(active) {
        @include e(bar, false) {
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                opacity: 0;
                background-color: $--color-white;
                border-radius: 10px;
                animation: progress-active 2s ease infinite;
            }
        }
    }

    @include m(success) {
        @include e(bar, false) {
            background-color: $--color-success;
        }
        @include e(icon, false) {
            color: $--color-success;
        }
    }

    @include m(error) {
        @include e(bar, false) {
            background-color: $--color-danger;
        }
        @include e(icon, false) {
            color: $--color-danger;
        }
    }

    @include m(warning) {
        @include e(bar, false) {
            background-color: $--color-warning;
        }
        @include e(icon, false) {
            color: $--color-warning;
        }
    }

    @include m(line) {

    }

    @include m(circle) {
        width: auto;
        @include e(value, false) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 100%;
            text-align: center;
            margin: 0;
        }
    }

    @include m(dashboard) {
        width: auto;
        @include e(value, false) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 100%;
            text-align: center;
            margin: 0;
        }
    }
}


@keyframes progress-active {
    from {
        opacity: 0.3;
        width: 0;
    }
    to {
        opacity: 0;
        width: 100%;
    }
}
