// Variables
$default-stripe-size: 40px;
$progress-bar-height: 12px;
$progress-bar-radius: 4px;
$progress-bar-bg: #f0f0f0;
$progress-bar-fill: #4CAF50;
$text-color: white;
$text-size: 11px;
$tooltip-bg: #333;
$tooltip-text: #fff;
$icon-spacing: 8px;
$flex: flex;
$center:center;
$relative:relative;
$absolute:absolute;

// for extand
.relative{
    position: $relative;
}
.absolute{
    position: $absolute;
}
// Main progress bar styles
.magic-progress-bar {
    width: 100%;
    
    &-title {
        margin-bottom: 5px;
        font-weight: bold;
        display: inline-block;
    }

    &-wrapper {
        display: $flex;
        align-items: $center;
        width: 100%;
    }

    &-container {
        width: 100%;
        background-color: $progress-bar-bg;
        border-radius: $progress-bar-radius;
        overflow-x: visible;
        overflow-y: hidden;
        flex-grow: 1;
        @extend .relative;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    }

    &-fill {
        height: $progress-bar-height;
        background-color: $progress-bar-fill;
        width: 0;
        border-radius: $progress-bar-radius;
        @extend .relative;
        text-align: right;
        padding-right: 10px;
        line-height: $progress-bar-height;
        color: $text-color;
        font-size: $text-size;
        display: $flex;
        align-items: $center;
        justify-content: flex-end;
        transition-property: width;
        transition-timing-function: ease-in-out;

        // Striped Effect
        &.magic-progress-bar-stripe {
            background-image: linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.15) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.15) 50%,
                rgba(255, 255, 255, 0.15) 75%,
                transparent 75%,
                transparent 100%,
                rgba(255, 255, 255, 0.15) 100%
            );
            background-size: $default-stripe-size $default-stripe-size;
        }

        // Animated Stripes
        &.magic-progress-bar-animate {
            animation-name: magic-progress-bar-stripes;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
    }

    // Percentage Styles
    &-percentage {
        font-weight: bold;

        &.inside {
            color: $text-color;
            padding-right: 10px;
        }

        &.outside {
            color: inherit;
        }

        &-tooltip {
            right: 0;
            @extend .absolute;
            top: -30px;
            background: $tooltip-bg;
            color: $tooltip-text;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            transform: translateX(50%);

            &:after {
                content: '';
                @extend .absolute;
                bottom: -5px;
                left: 50%;
                transform: translateX(-50%);
                border-width: 5px 5px 0;
                border-style: solid;
                border-color: $tooltip-bg transparent transparent;
            }
        }
    }

    // Icon Styles
    .progress-icons-wrapper {
        display: $flex;
        align-items: $center;
    }

    &-icon {
        &-before_title {
            margin-right: $icon-spacing;
        }

        &-after_title {
            margin-left: $icon-spacing;
        }
    }
}

// Keyframes (can't be nested)
@keyframes magic-progress-bar-stripes {
    from { background-position: var(--stripe-size, $default-stripe-size) 0; }
    to { background-position: 0 0; }
}