@use '../function' as *;
@use '../settings';

@mixin roolith-progress-bar() {
    progress {
        appearance: none;
        width: 100%;
        height: rem(10);
        background: var(--r-progress-background);
        border-radius: var(--r-progress-bar-radius);
        border: none;
    }

    progress::-moz-progress-bar {
        background: var(--r-progress-bar-color);
    }

    progress:not([value])::-moz-progress-bar {
        background: var(--r-progress-background);
    }

    progress::-webkit-progress-bar {
        background: var(--r-progress-background);
        border-radius: var(--r-progress-bar-radius);
        box-shadow: var(--r-progress-background-shadow);
    }

    progress::-webkit-progress-value {
        background: var(--r-progress-bar-color);
        border-radius: var(--r-progress-bar-radius);
    }

    progress:not([value])::-webkit-progress-bar {
        background: var(--r-progress-background);
    }

    @each $name, $value in settings.$colors {
        @if ($name != white) {
            .progress-#{'' + $name}::-moz-progress-bar {
                background: var(--r-color-#{$name});
            }

            .progress-#{'' + $name}::-webkit-progress-value {
                background: var(--r-color-#{$name});
            }
        }
    }
}