.progress {
  @include border-radius(0);
  &--thin {
    height: 0.4rem;
  }
}

.bg-moneta {
  background-color: $mo-progress-bar-default;
}

.progress-bubles {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 100%;

  &__item {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    height: $lambder-bubles-size;
    width: $lambder-bubles-size;
    border: 1px solid $mo-gray;
    border-radius: 50%;
    background-color: $white;
    margin-bottom: $lambder-bubles-border-thick;
    &:not(:last-child) {
      margin-right: $lambder-bubles-border-thick;
      &::after {
        z-index: 1;
        content: "";
        position: absolute;
        top: 50%;
        display: block;
        left: calc(100% + #{$lambder-bubles-border});
        width: 1000rem; // arbitrary high number
        height: $lambder-bubles-line;
        margin-top: -$lambder-bubles-line/2;
        background-color: $mo-gray;
      }
    }
    &--past {
      background-color: $mo-gray;
    }
    &--current {
      background-color: $mo-black;
      border-color: $mo-black;
    }
    &--success {
      background-color: $success;
      border-color: darken($success, $lambder-bubles-darker);
      border-width: $lambder-bubles-border-thick;
      &:not(:last-child)::after {
        left: calc(100% + #{$lambder-bubles-border-thick});
      }
    }

    &--denied {
      background-color: $danger;
      border-color: darken($danger, $lambder-bubles-darker);
      border-width: $lambder-bubles-border-thick;
      &:not(:last-child)::after {
        left: calc(100% + #{$lambder-bubles-border-thick});
      }
    }
  }
}