// stylelint-disable declaration-no-important

@mixin step-size($border-width, $dot-size: 1rem) {
  .step-item {
    padding-top: add($dot-size, 4px);

    &:after {
      top: add($dot-size * .5, 2px);
      height: $border-width;
    }

    &:before {
      width: $dot-size;
      height: $dot-size;
    }
  }
}

@mixin step-color($color) {
  .step-item {
    &:after,
    &:before {
      color: $white;
      background: $color;
    }

    &.active:before {
      color: inherit;
      border-color: $color;
    }
  }
}

.steps {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0;
  margin: 2rem 0;
  list-style: none;
  @include step-size(2px, .5rem);
  @include step-color($primary);
}

@each $color, $value in $extra-colors {
  .steps-#{$color} {
    @include step-color($value);
  }
}

.step-item {
  position: relative;
  flex: 1 1 0;
  min-height: 1rem;
  margin-top: 0;
  color: inherit;
  text-align: center;
  cursor: default;

  @at-root a#{&} {
    cursor: pointer;

    &:hover {
      color: inherit;
    }
  }

  &:not(:first-child):after {
    position: absolute;
    left: -50%;
    width: 100%;
    content: "";
    transform: translateY(-50%);
  }

  &:before {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    box-sizing: content-box;
    display: block;
    content: "";
    border: 2px solid $white;
    border-radius: $border-radius-pill;
    transform: translateX(-50%);
  }

  &.active {
    font-weight: $font-weight-bold;

    &:before {
      background: $white;
    }

    & ~ .step-item {
      color: $text-muted;

      &:after,
      &:before {
        background: $steps-color-inactive;
      }

      &:before {
        color: $text-muted !important;
      }
    }
  }
}

.steps-counter {
  counter-reset: steps;
  @include step-size(2px, 1.5rem);

  .step-item {
    counter-increment: steps;

    &:before {
      font-size: $h5-font-size;
      line-height: 1.5rem;
      content: counter(steps);
    }

    &.active ~ .step-item {
      &:before {
        background: $white;
      }
    }
  }
}