@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-progress {
    .progress-bar {
        @include flex-row();
        position: relative;
        overflow: unset;
        width: 0;
        opacity: 0;
        @include transition(width 1s linear);
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
        &:after {
            background: $primary_color none repeat scroll 0 0;
            border: 4px solid $primary_color;
            height: 40px;
            position: absolute;
            right: -1%;
            top: 50%;
            @include transform(translateY(-50%));
            width: 40px;
        }
        @include justify-content-center();
        @include d-flex();
        color: #fff;
        text-align: center;
        white-space: nowrap;
        background-color: $accent_color;
    }

    .progress {
        @include d-flex();
        line-height: inherit;
        overflow: unset;
        height: 1rem;
        font-size: 0.75rem;
        background-color: #e9ecef;
        border-radius: 0.25rem;

        .dnetor-progress-value {
            position: absolute;
            font-size: 14px;
            top: -35px;
            color: #000;
            right: 0;
            &:after {
                border-top: 5px solid;
                border-top-color: $primary_color;
                top: 100%;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                left: 50%;
                @include transform(translateX(-50%));
                position: absolute;
            }
        }
    }

    .dnetor-progress-label {
        display: inline-block;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 12px;
    }
}

.dnetor-progress-content {
    + .dnetor-progress-content {
        margin-top: 1rem;
    }
}