$progress-complete-color: $primary !default;
$progress-error-color: $danger !default;

.progress {
  .mobile-progress {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-md;

    .mobile-progress__label {
      .mobile-progress__label__current-step {
        margin-bottom: $spacing-xs;
      }
      .mobile-progress__label__next-step {
        font-size: 14px;
        margin-bottom: 0;
      }
    }
  }

  .progress__wrapper {
    width: 100%
  }

  ul.progress-bar {
    margin: 0;
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(1px, 1fr) );
    position: relative;
  }

  li.progress-bar__step {
    list-style-type: none;

    position: relative;
    text-align: center;

    .step {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      .step__indicator {
        line-height: 30px - 4px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        text-align: center;
        background-color: $light;
        border: 2px solid $light-gray-2;
        font-size: 14px;
        font-weight: 500;
        margin: 0 auto $spacing-xs;

        &:hover {
          background-color: $light-gray-3;
        }
      }

      &:hover .step__label {
        text-decoration: underline;
      }
    }

    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 4px;
      background-color: $light-gray-2;
      top: 13px;
      left: -50%;
      z-index: -1;
    }

    &:first-child:after {
      content: none;
    }

    &.progress-bar__step--current {
      .step .step__indicator {
        box-shadow: 0 0 0 0.2rem rgba($progress-complete-color,.25);
      }
    }

    &.progress-bar__step--complete {
      color: $progress-complete-color;

      .step {
        pointer-events: none;
        cursor: inherit;

        .step__indicator {
          color: $light;
          background-color: $progress-complete-color;
          border-color: $progress-complete-color;

          &:hover {
            background-color: lighten($progress-complete-color, 5%);
          }
        }
      }

      + li:after {
        background-color: $progress-complete-color;
      }

      &.progress-bar__step--editable .step {
        pointer-events: all;
        cursor: pointer;
      }
    }

    &.progress-bar__step--error {
      color: $progress-error-color;

      .step .step__indicator {
        color: $light;
        background-color: $progress-error-color;
        border-color: $progress-error-color;

        &:hover {
            background-color: lighten($progress-error-color, 5%);
          }
      }

      &.progress-bar__step--current .step .step__indicator {
        box-shadow: 0 0 0 0.2rem rgba($progress-error-color,.25);
      }
    }

    &.progress-bar__step--unclickable .step {
      pointer-events: none;
      cursor: inherit;
    }
  }

  @media (max-width: breakpoint('sm')) {
    .progress__wrapper {
      display: none;
    }

    .mobile-progress {
      display: flex;
    }

    ul.progress-bar {
      grid-template-columns: 1fr;
    }

    li.progress-bar__step {
      text-align: left;

      .step {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;

        .step__indicator {
          margin: $spacing-md $spacing-md $spacing-md 0;
        }
      }

      &:after {
        content: "";
        position: absolute;
        width: 4px;
        height: 100%;
        background-color: $light-gray-2;
        top: -50%;
        left: 13px;
        z-index: -1;
      }
    }
  }
}

.mobile-progress__status {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  background: $light-gray-2;

  .mobile-progress__status-overlay {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    margin: auto;
    background: $light;
    text-align: center;
    padding-top: 30%;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
  }
}

@for $i from 0 through 100 {
  .radial-progress-#{$i} {
    @if $i <= 50 {
      background-image: linear-gradient(90deg - ($i/10 * 36), $light-gray-2 50%, transparent 50%), linear-gradient(90deg, $primary 50%, $light-gray-2 50%);
    }
    @else {
      background-image: linear-gradient(90deg, $primary 50%, transparent 50%), linear-gradient(90deg - ($i/10 * 36 - 180), $primary 50%, $light-gray-2 50%);
    }
  }
}