@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --progress-bar-height: 12px;
    --progress-bar-height-ani: -24px;
    --progress-bar-radius: 8px;
    --progress-bar-back-color: #eeeeee;
    --progress-bar-color: #60A917;
    --progress-bar-buffer-color: #CE352C;
    --progress-bar-line-color: #b3d4fc;
    --progress-bar-line-back-color: #004D6F;
    --progress-bar-load-color: radial-gradient(#a9c0e9 0%, #a9c0e9 16%, transparent 42%);
    --progress-bar-value-color: #191919;
}

.dark-side {
    --progress-bar-back-color: #363942;
    --progress-bar-bar-color: #60A917;
    --progress-bar-buffer-color: #CE352C;
    --progress-bar-line-color: #b3d4fc;
    --progress-bar-line-back-color: #004D6F;
    --progress-bar-load-color: radial-gradient(#a9c0e9 0%, #a9c0e9 16%, transparent 42%);
    --progress-bar-value-color: #ffffff;
}

.progress-component {
    position: relative;
    display: block;
    width: 100%;

    .progress {
        display: block;
        position: relative;
        width: 100%;
        height: var(--progress-bar-height);
        background-color: var(--progress-bar-back-color);
        overflow: hidden;
        border-radius: var(--progress-bar-radius);

        &.with-load {
            background: transparent;
        }
    }

    .progress-data {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .progress-label {
            order: 1;
            font-size: 14px;
            font-weight: 400;
        }

        .progress-value {
            margin-left: auto;
            order: 2;
            font-weight: 600;
        }
    }

    .bar, .buffer, .load {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 3;
    }

    .load {
        width: 100%;
        animation: progress-loading 3s infinite linear;
        background: var(--progress-bar-load-color);
        background-size: var(--progress-bar-height) var(--progress-bar-height);
        z-index: 1;
        margin-top: -1px;
    }

    .buffer {
        z-index: 2;
        background-color: var(--progress-bar-buffer-color);
    }

    .bar {
        z-index: 3;
        background: var(--progress-bar-color);
    }

    .line {
        background-color: var(--progress-bar-line-color);
        display: flex;

        &::before {
            height: 100%;
            width: 100%;
            background-color: var(--progress-bar-line-back-color);
            content: '';
            animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
    }

    .segments {
        background: var(--progress-bar-back-color);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        
        .bar {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 100%;
            background: var(--progress-bar-color);
            z-index: 1;
        }
        
        .segment {
            background: transparent;
            border: 1px solid var(--progress-bar-back-color);
            height: 100%;
            z-index: 2;
            &:first-child {
                border-radius: 8px 0 0 8px;
            }
            &:last-child {
                border-radius: 0 4px 4px 0;
            }
        }
    }
    
    .progress {
        &.small {
            --progress-bar-height: 6px;
            --progress-bar-radius: 4px;
        }
    }
}

@keyframes progress-loading {
    0% { opacity: 1; background-position: 0 var(--progress-bar-height-ani); }
    50% { opacity: 0;}
    100% { opacity: 1; background-position: -200px var(--progress-bar-height-ani);}
}

@keyframes running-progress {
    0% { margin-left: 0; margin-right: 100%; }
    50% { margin-left: 25%; margin-right: 0; }
    100% { margin-left: 100%; margin-right: 0; }
}

each(@normalColors, {
    @lightColor: "light-@{value}";
    @backColor: @@lightColor;
    
    .bar-@{value} {
        --progress-bar-color: @@value;
    }
    
    .progress-@{value} {
        --progress-bar-color: @@value;
        --progress-bar-back-color: @backColor;
    }
})

each(@accentColors, {
    @color: "@{value}Color";
    .progress-@{value} {
        --progress-bar-color: @@color;
    }
})