@import "../../next-core/lib/next.scss";
@import "./scss/variable.scss";
@import "./scss/normalize.scss";
@import "./scss/mixin.scss";

#{$progress-prefix}-line {
    & {
        width: 100%;
        display: inline-block;
        position: relative;

        &-container {
            margin-right: 0;
            padding-right: 0;
            display: inline-block;
            width: 100%;
            vertical-align: middle;
        }

        &-underlay {
            position: relative;
            width: 100%;
            background-color: $progress-line-underlay-color;
        }

        &-overlay {
            position: absolute;
            left: 0;
            top: 0;
            transition: all 1s $progress-easing;

            &-normal {
                background-color: $progress-line-normal-color;
            }

            &-success {
                background-color: $progress-line-success-color;
            }

            &-error {
                background-color: $progress-line-error-color;
            }

            &-started {
                background-color: $progress-line-started-color;
            }

            &-middle {
                background-color: $progress-line-middle-color;
            }

            &-almostfinished {
                background-color: $progress-line-almostfinished-color;
            }
        }
    }

    &-small {
        @include progress-bar-size($progress-line-underlay-size-s, $progress-line-overlay-size-s, $progress-line-font-s, $progress-line-radius-s);
    }

    &-medium {
        @include progress-bar-size($progress-line-underlay-size-m, $progress-line-overlay-size-m, $progress-line-font-m, $progress-line-radius-m);
    }

    &-large {
        @include progress-bar-size($progress-line-underlay-size-l, $progress-line-overlay-size-l, $progress-line-font-l, $progress-line-radius-l);
    }

    &-show-info {
        #{$progress-prefix}-line-container {
            padding-right: 60px;
            margin-right: -60px;
        }

        #{$progress-prefix}-line-text {
            width: 50px;
            text-align: left;
            margin-left: 10px;
            vertical-align: middle;
            display: inline-block;
            color: $progress-line-font-color;
        }
    }
}

#{$progress-prefix}-circle {
    & {
        position: relative;
        display: inline-block;

        &-underlay {
            stroke: $progress-circle-underlay-color;
            stroke-width: $progress-circle-underlay-width;
        }

        &-overlay {
            transition: all 1s $progress-easing;
            stroke-linecap: $progress-circle-corner;
            stroke-width: $progress-circle-overlay-width;

            &-normal {
                stroke: $progress-circle-normal-color;
            }

            &-success {
                stroke: $progress-circle-success-color;
            }

            &-error {
                stroke: $progress-circle-error-color;
            }

            &-started {
                stroke: $progress-circle-started-color;
            }

            &-middle {
                stroke: $progress-circle-middle-color;
            }

            &-almostfinished {
                stroke: $progress-circle-almostfinished-color;
            }
        }
    }

    &-small {
        @include progress-ring-size($progress-circle-size-s, $progress-circle-font-s);
    }

    &-medium {
        @include progress-ring-size($progress-circle-size-m, $progress-circle-font-m);
    }

    &-large {
        @include progress-ring-size($progress-circle-size-l, $progress-circle-font-l);
    }

    &-text {
        display: block;
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        margin: 0;
        text-align: center;
        line-height: 1;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        transition: transform .3s $progress-easing;
        color: $progress-circle-text-color;
    }
}