/**
 * Bootstrap progress bars
 */

@use "../settings" as *;
@use "../tools" as *;

@import "bootstrap/scss/progress";

// Modifier to the Bootstrap .progress block
.progress-stepped {
  @include rfs(0 7rem (1rem * $line-height-base) 0, margin);
}

// New component to display the steps below the progress bar
.progress-steps {
  display: flex;
  @include rfs((-1rem * $line-height-base), margin-top);
  padding-left: 0;
  list-style: none;
}

// Step element within progress-steps
.progress-step {
  flex: 1;
  color: $black;

  &::before {
    display: block;
    height: .5em;
    margin-left: -.5em;
    content: "";
    background-image: escape-svg($uoe-caret-icon);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 1em;
  }

  &:last-of-type {
    @include rfs(0 0 7rem, flex);
    padding-right: 0;
  }
}

// Progress step element modifiers
.progress-step-completed {
  color: $text-muted;
  &::before {
    background-image: escape-svg($uoe-caret-icon-muted);
  }
}
.progress-step-current {
  font-weight: 600;
}