@use '../core/tokens/token-utils';
@use './m3-progress';

$fallbacks: m3-progress.get-tokens();

$progress-height: 16px !default;
$progress-fill-animation-timing: 1s linear infinite !default;

@mixin gradient-striped($color: rgba(white, 0.15), $angle: 45deg) {
  background-image: linear-gradient(
    $angle,
    $color 25%,
    transparent 25%,
    transparent 50%,
    $color 50%,
    $color 75%,
    transparent 75%,
    transparent
  );
}

.mtx-progress {
  display: flex;
  height: $progress-height;
  margin: 8px 0;
  overflow: hidden;
  font-size: token-utils.slot(progress-text-size, $fallbacks);
  border-radius: token-utils.slot(progress-container-shape, $fallbacks);
  background-color: token-utils.slot(progress-track-color, $fallbacks);
}

.mtx-progress-fill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: width 0.6s ease;
  background-color: token-utils.slot(progress-indicator-color, $fallbacks);
  color: token-utils.slot(progress-text-color, $fallbacks);
}

.mtx-progress-fill-info {
  background-color: token-utils.slot(progress-info-indicator-color, $fallbacks);
  color: token-utils.slot(progress-info-text-color, $fallbacks);
}

.mtx-progress-fill-success {
  background-color: token-utils.slot(progress-success-indicator-color, $fallbacks);
  color: token-utils.slot(progress-success-text-color, $fallbacks);
}

.mtx-progress-fill-warning {
  background-color: token-utils.slot(progress-warning-indicator-color, $fallbacks);
  color: token-utils.slot(progress-warning-text-color, $fallbacks);
}

.mtx-progress-fill-danger {
  background-color: token-utils.slot(progress-danger-indicator-color, $fallbacks);
  color: token-utils.slot(progress-danger-text-color, $fallbacks);
}

.mtx-progress-fill-striped {
  @include gradient-striped();

  background-size: $progress-height $progress-height;
}

.mtx-progress-fill-animated {
  animation: mtx-progress-fill-stripes $progress-fill-animation-timing;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes mtx-progress-fill-stripes {
  from {
    background-position: $progress-height 0;
  }

  to {
    background-position: 0 0;
  }
}