@import "../../defaults";   // Global component defaults.

// Override default bootstrap progress bar variables.
$progress-height: 1.25rem;
$progress-font-size: 0.875rem;
$progress-bg: transparent;
$progress-border-radius: 0.125rem;
$progress-box-shadow: none;

@import "../../../node_modules/bootstrap/scss/progress";

// Change default bootstrap progress bar style.
.progress {
  border: 1px solid var(--bs-border-color);
}

// Manage a switched color contrast for the percent.
.progress-bar {
  font-weight: 700;
  line-height: 1.225rem;
  padding: 0.0625rem 0rem;

  @each $color, $value in $theme-colors {
    &.bg-#{$color} {
      color: color-contrast($value) if($enable-important-utilities, null, null);
    }
  }
}

// Change the number of stripes in a Bootstrap 5 progress bar.
[dir="ltr"] .progress-bar-striped {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_167_9176" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><rect width="16" height="16" fill="%235082F7"/></mask><g mask="url(%23mask0_167_9176)"><rect x="-19" y="1.86823" width="6" height="28" transform="rotate(-45 -19 1.86823)" fill="white" fill-opacity="30%" /><rect x="-5" y="-0.131775" width="6" height="28" transform="rotate(-45 -5 -0.131775)" fill="white" fill-opacity="30%" /><rect x="11" y="-0.131775" width="6" height="28" transform="rotate(-45 11 -0.131775)" fill="white" fill-opacity="30%" /></g></svg>');
}

[dir="rtl"] .progress-bar-striped {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(-90)"><mask id="mask0_167_9176" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><rect width="16" height="16" fill="%235082F7"/></mask><g mask="url(%23mask0_167_9176)"><rect x="-19" y="1.86823" width="6" height="28" transform="rotate(-45 -19 1.86823)" fill="white" fill-opacity="30%" /><rect x="-5" y="-0.131775" width="6" height="28" transform="rotate(-45 -5 -0.131775)" fill="white" fill-opacity="30%" /><rect x="11" y="-0.131775" width="6" height="28" transform="rotate(-45 11 -0.131775)" fill="white" fill-opacity="30%" /></g></svg>');
}

.progress-bar-striped {
  background-size: 1rem 1rem;
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
