linear.progress.fluent.scss

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

$theme: $fluent;
$track-color: color(gray, 200);

:host(:dir(rtl)[indeterminate]),
:host([dir='rtl']) {
    [part~='track'] {
        transform: rotateY(0deg);
    }

    [part~='indeterminate'] {
        animation-name: igc-indeterminate-bar-fluent-rtl;
    }
}

:host([label-align='top']),
:host([label-align='top-start']),
:host([label-align='top-end']) {
    [part~='track'] {
        margin-block-start: rem(2px);
    }
}

:host([label-align='bottom']),
:host([label-align='bottom-start']),
:host([label-align='bottom-end']) {
    [part~='track'] {
        margin-block-end: rem(2px);
    }
}

[part~='indeterminate']:not([part~='secondary']) {
    width: 33% !important;
    min-width: 33%;
    animation-name: igc-indeterminate-bar-fluent;
    animation-duration: var(--linear-animation-duration);
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    left: auto;

    &::after {
        display: none;
    }
}

[part~='secondary'] {
    display: none;
}

// Mixin for Gradient Backgrounds
@mixin gradient-indeterminate($part, $color-key) {
    [part~='#{$part}'][part~='indeterminate'] {
        background: linear-gradient(90deg, transparent 0%, var-get($theme, $color-key) 50%, transparent 100%);
    }
}

// Apply Gradient Backgrounds
@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 gradient-indeterminate($part, $color-key);
}