linear.progress.common.scss

@use 'styles/utilities' as *;
@use '../light/themes' as *;
@use '../../vars' as *;
@use '../../animations' as *;

$theme: $material;

:host {
    --track-size: #{var-get($theme, 'track-height')};
}

:host([striped]) {
    --stripe-size: #{var-get($theme, 'strip-size')};
}

[part~='track'] {
    height: var(--track-size);
    border-radius: var-get($theme, 'track-border-radius');
    background: var-get($theme, 'track-color');
}

[part~='value'] {
    color: var-get($theme, 'text-color');
}

@mixin part-styles($part, $color-key) {
    :host([variant='#{$part}']) {
        --fill-bg: #{var-get($theme, $color-key)};
    }

    :host([striped][variant='#{$part}']) {
        --striped-bg: #{var-get($theme, $color-key) repeating-linear-gradient(
            var(--linear-strips-orientation),
            var-get($theme, $color-key),
            var-get($theme, $color-key) var(--stripe-size),
            var-get($theme, 'stripes-color') var(--stripe-size),
            var-get($theme, 'stripes-color') calc(var(--stripe-size) * 2)
        )};
    }
}

// Generate styles for each variant
@each $part, $color-key in (
    'primary': 'fill-color-default',
    'danger': 'fill-color-danger',
    'warning': 'fill-color-warning',
    'info': 'fill-color-info',
    'success': 'fill-color-success'
) {
    @include part-styles($part, $color-key);
}

:host(:not([indeterminate])) {
    [part~='fill'] {
        background-color: var(--fill-bg);
    }
}

[part~='fill'] {
    &::after {
        background-color: var(--fill-bg);
    }
}

:host([striped]:not([indeterminate])) {
    [part~='fill'] {
        background: var(--striped-bg);
    }
}