$sui-a-step-indicator-max: 10 !default;

.sui-a-step-indicator {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-size: $sui-font-size-md;
  margin: $sui-space-lg 0 $sui-space-lg -2rem;

  &__step {
    position: relative;
    flex: none;
    display: block;
    padding: 0;
    width: .75rem;
    height: .75rem;
    border-radius: $sui-border-radius-rounded;
    background: $sui-color-brand-denim-100;
    color: $sui-color-primary;
    border: rem(2) solid;
    margin-left: 2rem - rem(2);
    outline: none !important;
    text-align: center;

    > .sui-a-icon {
      opacity: 0;
      font-size: rem(6);
      line-height: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    // Enlarge hitzone
    &::after {
      content: '';
      position: absolute;
      top: -1rem;
      left: -1rem;
      right: -1rem;
      bottom: -1rem;
      border-radius: $sui-border-radius-rounded;
      background: currentColor;
      opacity: 0;
      transition: .2s;
    }

    & + &::before {
      content: '';
      width: 2rem;
      height: rem(2);
      margin-top: 50%;
      transform: translateY(-50%);
      background: currentColor;
      position: absolute;
      top: 0;
      right: 100%;
      pointer-events: none;
    }
  }

  &.as--interactive &__step:not([disabled]):active::after {
    opacity: .1;
  }

  // -------------------------
  // Active step
  // -------------------------
  @for $i from 1 through $sui-a-step-indicator-max {
    // Disable next steps
    &.as--step-#{$i} &__step:nth-child(n+#{$i + 1}) {
      pointer-events: none;
      color: $sui-color-brand-denim-300;
    }

    &.as--step-#{$i} &__step:nth-child(#{$i}) {
      background: currentColor;

      > .sui-a-icon {
        color: contrast($sui-color-primary);
      }
    }
  }

  // -------------------------
  //    Individual State
  // -------------------------
  &__step.as--active {
    color: $sui-color-primary;
    background: currentColor;
  }

  &__step[disabled],
  &__step.as--disabled {
    pointer-events: none;
    color: $sui-color-brand-denim-300;
  }

  &__step.as--success {
    color: $sui-color-primary;

    > .sui-a-icon {
      opacity: 1;
    }

    &.as--active > .sui-a-icon {
      color: contrast($sui-color-primary);
    }
  }

  &__step.as--warning,
  &__step.as--danger {
    > .sui-a-icon {
      color: currentColor !important;
      opacity: 1;
      font-size: .8em;
      top: auto;
      bottom: 100%;
      margin-bottom: rem(2);
      transform: translate(-50%, 0);
      animation: sui-a-step-indicator--validation-icon 600ms infinite alternate ease-in-out;
    }
  }

  &__step.as--warning {
    color: $sui-color-warning;
  }

  &__step.as--danger {
    color: $sui-color-danger;
  }

  // -------------------------
  //    Message
  // -------------------------
  &__message {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, rem(5));
    text-align: center;
    margin-left: 1rem;
    font-family: $sui-font-family-secondary;
    font-size: $sui-font-size-sm;
    white-space: nowrap;
    color: $sui-color-text-light;

    &.as--danger {
      color: $sui-color-danger-text;
    }

    &.as--warning {
      color: $sui-color-warning-text;
    }
  }
}