/* ============================================================================
   06-COMPONENTS -> #PROGRESS
   ========================================================================= */

/**
 * 
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Progress
 */

.progress {
    --progress-bg: var(--bg-tertiary);
    --progress-border-radius: var(--rounded-md);
    --progress-height: var(--space-2);
    --progress-bar-bg: var(--color-primary-600);

    border-radius: var(--progress-border-radius);
    display: flex;
    height: var(--progress-height);
    overflow: hidden;
    background-color: var(--progress-bg);
}


/**
 * Progress bar
 */

.progress__bar {
    @include transition(('width'));
    
    background-color: var(--progress-bar-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Error progress
 */

.progress[data-theme=error] {
    --progress-bar-bg: var(--color-error-600);
}


/**
 * Modifier: Success progress
 */

.progress[data-theme=success] {
    --progress-bar-bg: var(--color-success-600);
}


/**
 * Modifier: Warning progress
 */

.progress[data-theme=success] {
    --progress-bar-bg: var(--color-warning-600);
}