/* Component: Progress Bar
 * Description: Styles for a customizable progress bar component, including determinate and indeterminate states. 
 *              The progress bar features a rounded background, animated gradient fill, and smooth width transitions.
 */

 
.smd-component_progress {
    width: 100%;
    height: 8px;
    background: var(--color-background-lighter);
    border-radius: 4px;
    overflow: hidden;
    position: relative; 
}

.smd-component_progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-branding-primary), var(--color-branding-secondary));
    transition: width 0.3s ease;
    width: 0%; 
    min-width: 0;
}

.smd-component_progress--indeterminate .smd-component_progress-bar {
    width: 30%;
    animation: progress-indeterminate 2s infinite linear;
}

@keyframes progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}