.progress-bar {
  $progress-bar-vertical: -3;
  $progress-bar-horizontal: -2;
  $progress-bar-vertical-small: -5;
  $progress-bar-horizontal-small: -4;
  $progress-bar-label-bottom: -5;

  @include set-font(0, "single");
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: spacing($progress-bar-vertical, $times: 2, $add: line-height("single", $include-calc: false));


  &::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: $width-border dotted color("border");
  }

  //the after element pushes progress-bar__total to the right
  &::after {
    content: "";
    display: block;
    flex: 1 0 auto;
    border-left: $width-border solid color("background");
    height: 100%;
    z-index: $z-index-just-above-static;
  }

  &--show-labels {
    height: spacing($progress-bar-vertical, $times: 2, $add: "#{line-height("single", $include-calc: false)} + #{font-size(-1)} + #{spacing($progress-bar-label-bottom)}");

    .progress-bar__label {
      display: flex; //label is hidden unless you add this class
      justify-content: flex-end;
    }

    &::before {
      padding-bottom: spacing($progress-bar-label-bottom, $add: font-size(-1));
    }
  }

  &__progress {
    @include set-colors("theme");
    position: relative;
    height: 100%; //make sure progress element takes up entire progressbar height to hide all overflow when wrapping total onto new line
    display: flex;
    flex: 0 0 auto;
    max-width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    text-align: right;
    padding: spacing($progress-bar-vertical) spacing($progress-bar-horizontal);
    transition: flex-basis .5s $easing-in-out;
    //white-space: nowrap;

    //after element overlays any wrapped text in __progress
    &::after {
      content: "";
      position: absolute;
      display: block;
      background-color: color("theme");
      left: 0;
      right: 0;
      bottom: 0;
      height: spacing($progress-bar-vertical);
    }

    &:not(:last-child){
      border-right: $width-border solid color("background");
    }

    &--confirm {
      @include set-colors("utility-confirm-background");

      &::after {
        background-color: color("utility-confirm-background");
      }
    }

    &--warning {
      @include set-colors("utility-warning-background");

      &::after {
        background-color: color("utility-warning-background");
      }
    }

    &--transistion-from-start {
      flex-basis: 0 !important;
    }

    //with and without ; because reacts adds the ;, but we also want it to work without
    &[style~="0%"],
    &[style~="0%;"] {
      @include set-colors("background");
      padding: spacing($progress-bar-vertical) spacing(-5) spacing($progress-bar-vertical) 0;
      text-align: left;
      white-space: nowrap;

      &::after {
        background-color: color("background");
      }

      & .progress-bar__label {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        justify-content: flex-start;
      }

    }

    & + & {
      .progress-bar__label {
        padding-left: spacing(-5);
      }
    }
  }

  &__label {
    display: none;
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    @include set-colors("background");
    margin: spacing($progress-bar-vertical, $times: -1) spacing($progress-bar-horizontal, $times: -1) spacing($progress-bar-vertical) spacing($progress-bar-horizontal, $times: -1);
    padding-bottom: spacing($progress-bar-label-bottom);
    flex: 0 0 auto;
    white-space: normal;
    word-break: break-all;
    line-height: 1;
    height: spacing($progress-bar-label-bottom, $add: font-size(-1));
    overflow-y: hidden;
    color: transparent;

    //avoid clipping of icons
    padding-top: 1px;
    padding-right: 1px;

    @include icon-style {
      height: spacing($progress-bar-label-bottom, $add: font-size(-1));
      margin-left: spacing(-5);
      color: color("foreground");
      order: 10; //move the icon the right
    }

    //TODO deprecate, use .icon-[icon name] class instead
    &[data-icon]::before {
      content: attr(data-icon);
    }

    @include breakpoint("wide") {
      color: color("foreground");
      height: auto;
      overflow-y: visible;
      white-space: nowrap;
      word-break: normal;

      :not(.progress-bar__progress[style~="100%"]):not(.progress-bar__total) > & {
        &::before {
          content: none;
        }
      }
    }

    .progress-bar__progress[style~="0%"] &,
    .progress-bar__progress[style~="100%"] &,
    &--always-show {
      color: color("foreground");
      height: auto;
      overflow-y: visible;
      white-space: nowrap;
      word-break: normal;

      &::before {
        height: auto;
      }
    }

    .progress-bar__progress[style~="0%"] & {
      &::before {
        content: none;
      }
    }
  }

  &__total {
    order: 100;
    flex: 0 0 auto;
    white-space: nowrap;
    position: relative;
    text-align: right;
    padding: spacing($progress-bar-vertical) 0 spacing($progress-bar-vertical) $width-border;
    color: color("foreground-secondary");
    background-color: color("background");

    & .progress-bar__label {
      margin-right: 0;
    }
  }

  &--small {
    @include set-font(-1, "single");
    height: spacing($progress-bar-vertical-small, $times: 2, $add: line-height("single", $include-calc: false));

    &.progress-bar--show-labels {
      height: spacing($progress-bar-vertical-small, $times: 2, $add: "#{line-height("single", $include-calc: false)} + #{font-size(-1)} + #{spacing($progress-bar-label-bottom)}");
    }

    & .progress-bar__label {
      margin: spacing($progress-bar-vertical-small, $times: -1) spacing($progress-bar-horizontal-small, $times: -1) spacing($progress-bar-vertical-small) spacing($progress-bar-horizontal-small, $times: -1);
    }

    & .progress-bar__total {
      padding: spacing($progress-bar-vertical-small) 0 spacing($progress-bar-vertical-small) spacing(-5);

      & .progress-bar__label {
        margin-right: 0;
      }
    }

    & .progress-bar__progress {
      padding: spacing($progress-bar-vertical-small) spacing($progress-bar-horizontal-small);

      &::after {
        height: spacing($progress-bar-vertical-small);
      }

      &[style~="0%"] {
        padding: spacing($progress-bar-vertical-small) spacing(-5) spacing($progress-bar-vertical-small) 0;
      }
    }
  }
}