@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/opacity';

@mixin mx-progress-bar-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  .mx-progress-bar {
    &__text {
      color: map.get($color-theme, onSurface);
    }

    &__progress-container {
      background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-12);
    }

    &__fill {
      background-color: map.get($color-theme, primary);
    }

    &__percentage {
      color: map.get($color-theme, onSurfaceVariant);
    }

    &__error-message {
      color: map.get($color-theme, error);
    }

    &--success {
      .mx-progress-bar__status-icon {
        color: map.get($color-theme, successVivid);
      }

      .mx-progress-bar__fill {
        background-color: map.get($color-theme, successVivid);
      }
    }

    &--error {
      .mx-progress-bar__status-icon {
        color: map.get($color-theme, errorVivid);
      }

      .mx-progress-bar__fill {
        background-color: map.get($color-theme, errorVivid);
      }
    }
  }
}