@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/progress-bar';

@mixin msk-progress-bar {
    @include progress-bar.progress-bar;
    .#{$prefix}--progress-bar {
        --#{$prefix}-interactive: #{tk.$msk--color-bg-progress-filled};
        --#{$prefix}-support-success: #{tk.$msk--color-bg-feedback-success-medium};
        --#{$prefix}-support-error: #{tk.$msk--color-bg-feedback-error-medium};
        --#{$prefix}-layer: #{tk.$msk--color-bg-track};
    }

    .#{$prefix}--progress-bar__label {
        @include m.msk-input-label-text;
    }

    .#{$prefix}--progress-bar__helper-text {
        @include m.msk-input-helper-text;
    }

    .#{$prefix}--progress-bar__status-icon {
        visibility: hidden;
    }

    .cds--progress-bar--error {
        .#{$prefix}--progress-bar__label {
            @include m.msk-icon-bg-invalid($color: 'FF85BF');

            background-position: right center;
            background-repeat: no-repeat;
            background-size: m.msk-rem(22px);
        }
    }

    .cds--progress-bar--finished {
        .#{$prefix}--progress-bar__label {
            @include m.msk-icon-bg-check($color: '8DDE8B');

            background-position: right center;
            background-repeat: no-repeat;
            background-size: m.msk-rem(22px);
        }
    }
}