$white: #fff !default;
$progress-height: 1rem !default;
$progress-bar-animation-timing: 1s linear infinite !default;

@mixin gradient-striped($color: rgba($white, .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: .75rem;
  background-color: #eceff1;
  border-radius: .25rem;
}

.mtx-progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: width .6s ease;
}

.mtx-progress-bar-success {
  color: #fff;
  background-color: #4caf50;
}

.mtx-progress-bar-info {
  color: #fff;
  background-color: #2196f3;
}

.mtx-progress-bar-warning {
  color: #fff;
  background-color: #fb8c00;
}

.mtx-progress-bar-danger {
  color: #fff;
  background-color: #ff5252;
}

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

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

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

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

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

  to {
    background-position: 0 0;
  }
}