// ============================================================================
// Elements | Progress
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;

@use "../../soul_type" as *;

// ============================================================================
// Progress Bar
// ============================================================================

@mixin progress_base() {
    // Add the correct vertical alignment in Chrome, Firefox, and Opera.
    vertical-align: baseline;
    height: q(12);
    border-radius: q(4);
    // @include border-radius(var(--#{$prefix}progress-border-radius));
}
/// Mixin to style <progress> tag
/// @group Form
@mixin progress_bar() {
    height: q(12);
    border: none;
    border-radius: q(4);
    background-color: var(--color_fill_primary);
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;

    // WebKit (Chrome, Safari)
    &::-webkit-progress-bar {
        background-color: var(--color_fill_primary);
        border-radius: q(4);
    }

    &::-webkit-progress-value {
        background-color: var(--color_text_primary);
        border-radius: q(4);
        transition: width 0.3s ease;
    }

    // Firefox
    &::-moz-progress-bar {
        background-color: var(--color_text_primary);
        border-radius: q(4);
        transition: width 0.3s ease;
    }
}

/// @group Form
progress,
meter {
    @include progress_bar;
}

/*
Source - https://stackoverflow.com/a
Posted by Teshtek, modified by community. See post 'Timeline' for change history
Retrieved 2026-01-26, License - CC BY-SA 4.0
*/

progress {
    @include progress_base;
    // border-radius: 7px;
    // width: 80%;
    // height: q(12);
    // height: 22px;
    // margin-left: -11.5%;
    // box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
progress::-webkit-progress-bar {
    background-color: yellow;
    border-radius: q(7);
}
progress::-webkit-progress-value {
    background-color: blue;
    border-radius: q(7);
    // box-shadow: 1px 1px 5px 3px rgba(255, 0, 0, 0.8);
}
progress::-moz-progress-bar {
    /* style rules */
}
// ============================================================================
// Bootstrap-style Progress Bar Component
// ============================================================================

/// Progress container mixin
/// @group Progress
@mixin progress {
    display: flex;
    height: q(10);
    overflow: hidden;
    font-size: calc(var(--typescale-base) * 0.75);
    background-color: var(--color_fill_primary);
    border-radius: q(4);

    // Stacked progress bars
    .progress-bar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        color: var(--color_text_inverted, #fff);
        text-align: center;
        white-space: nowrap;
        background-color: var(--color_accent_primary);
        transition: width 0.6s ease;
    }
}

/// Progress bar label mixin
/// @group Progress
@mixin progress--label {
    .progress-bar {
        padding: 0 q(8);
    }
}

/// Small progress bar mixin
/// @group Progress
@mixin progress--sm {
    height: q(4);
    font-size: calc(var(--typescale-base) * 0.625);
}

/// Large progress bar mixin
/// @group Progress
@mixin progress--lg {
    height: q(16);
    font-size: calc(var(--typescale-base) * 0.875);
}

// Striped progress bar
@keyframes progress-bar-stripes {
    0% {
        background-position-x: q(10);
    }
}

/// Striped progress bar mixin
/// @group Progress
@mixin progress--striped {
    .progress-bar {
        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
        );
        background-size: q(10) q(10);
    }
}

/// Animated striped progress bar mixin
/// @group Progress
@mixin progress--animated {
    .progress-bar {
        animation: progress-bar-stripes 1s linear infinite;
    }
}

/// Primary progress bar color mixin
/// @group Progress
@mixin progress-bar--primary {
    background-color: var(--color_accent_primary);
}

/// Secondary progress bar color mixin
/// @group Progress
@mixin progress-bar--secondary {
    background-color: var(--color_text_secondary);
}

/// Success progress bar color mixin
/// @group Progress
@mixin progress-bar--success {
    background-color: var(--color_log_success);
}

/// Warning progress bar color mixin
/// @group Progress
@mixin progress-bar--warning {
    background-color: var(--color_log_warning);
}

/// Danger progress bar color mixin
/// @group Progress
@mixin progress-bar--danger {
    background-color: var(--color_log_error);
}

/// Info progress bar color mixin
/// @group Progress
@mixin progress-bar--info {
    background-color: var(--color_log_info);
}