/*
Form step wizard

The form step wizard is used to keep track of the step a user is on in a given form.  Use bd-form-step-wizard component.

Markup:
<div>
    <nav class="form-step-wizard">
        <ol class="steps">
          <li class="step step--active">
            <div class="step-content">
              <a href class="step-link">Bank account details</a>
            </div>
          </li>
          <li class="step">
            <div class="step-content">
              <a href class="step-link">Business details</a>
            </div>
          </li>
          <li class="step">
            <div class="step-content">
              <a href tabindex="-1" class="step-link">Contact info</a>
            </div>
          </li>
          <li class="step">
            <div class="step-content">
              <a href tabindex="-1" class="step-link">Review Application</a>
            </div>
          </li>
        </ol>
    </nav>
    <nav class="form-step-wizard" style="padding-top: 100px">
        <ol class="steps">
          <li class="step step--complete">
            <div class="step-content">
              <a href aria-label="complete" class="step-link">Bank account details</a>
            </div>
          </li>
          <li class="step step--active">
            <div class="step-content">
              <a href class="step-link">Business details</a>
            </div>
          </li>
          <li class="step">
            <div class="step-content">
              <a href tabindex="-1" class="step-link">Contact info</a>
            </div>
          </li>
          <li class="step">
            <div class="step-content">
              <a href tabindex="-1" class="step-link">Review Application</a>
            </div>
          </li>
        </ol>
    </nav>
</div>

Name: wizardStepper

Styleguide 2.28
*/

@step-circle-size: 40px;
@color-border: @theme-grey10;
@color-text: @theme-grey12;
@color-active-completed: @theme-green1;
@step-circle-size-small: 30px;

/* Deprecating */
.form-step-wizard__steps {
    display: flex;
    justify-content: center;
}

.form-step-wizard__step-container {
    display: flex;
}

.form-step-wizard__step {
    width: @step-circle-size;
    height: @step-circle-size;
    background: #FFFFFF;
    border-radius: 50%;
    line-height: 36px;
    border: 2px solid @color-border;
    text-align: center;
}

.form-step-wizard__step--small {
    width: @step-circle-size-small;
    height: @step-circle-size-small;
    display: flex;
    align-items: center;
    justify-content: center;

    .form-step-wizard__step-link {
        font-size: 14px;
        line-height: 28px;
    }
    .form-step-wizard__step-link--completed {
        height: 11px;
        width: 11px;
        margin-top: 3px;
    }
}

.form-step-wizard__step--active {
    border-color: @color-active-completed;
    background-color: @color-active-completed;
}

.form-step-wizard__step--completed {
    border-color: @color-active-completed;
    background-color: #FFFFFF;
}

.form-step-wizard__step-link {
    color: @color-text;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
}

.form-step-wizard__step-link--active {
    color: #FFFFFF;
}

.form-step-wizard__step-link--completed {
    margin-top: 11px;
}

.form-step-wizard__step-line {
    height: 0px;
    width: 114px;
    border: 1px solid @color-border;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.form-step-wizard__step-line--small {
    width: 20px;
}

.form-step-wizard__step-line--completed {
    border-color: @color-active-completed;
}

.form-step-wizard__step-label-container {
    display: flex;
    justify-content: center;
}

.form-step-wizard__step-label {
    margin-top: 12px;
    font-size: 12px;
    color: @color-text;
    text-align: center;
    width: 154px;
}

.form-step-wizard__step-label--active, .form-step-wizard__step-label--completed {
    color: @color-active-completed;
}

.form-step-wizard__step-label--active {
    font-weight: bold;
}


//new css
/* Variables and Mixins */
@new-step-circle-size: 36px;

.step-connector {
    content: "";
    position: absolute;
    height: 2px;
    top: @new-step-circle-size / 2;
    border-top: 2px solid @color-border;
    z-index: -1;
}

/* Styles */
.steps {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    counter-reset: step;
    list-style-type: none;
}

.step {
    flex: 1 1 100%;
    position: relative;
    z-index: 1;
    min-width: 0;
    &:first-of-type {
      .step-content:after {
        width: 50%;
        left: auto;
        right: 0;
      }
    }
    &:last-of-type {
        .step-content:after {
            width: 50%;
        }
    }
}

.step-content {
  min-width: 0;
  position: relative;
  &:after { // connector between steps
    .step-connector;
    width: 100%;
    left: 0;
  }
}

.step-link {
    position: relative;
    display: block;
    margin: 0;
    padding-top: @new-step-circle-size + 20px;
    padding-left: 5px;
    outline: 0;
    text-decoration: none;
    pointer-events: none;
    color: @color-text;
    font-size: 12px;
    text-align: center;
    cursor: default;
    &:before { // circle with step number
        content: counter(step);
        counter-increment: step;
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        height: @new-step-circle-size;
        width: @new-step-circle-size;
        transform: translateX(-50%);
        background: #fff;
        border: 2px solid @color-border;
        border-radius: 50%;
        line-height: @new-step-circle-size;
        color: @color-text;
        font-weight: 500;
        font-size: 18px;
        text-align: center;
    }
}

.step--complete {
    // step connector is green when completed
    > .step-content:after {
        border-color: @color-active-completed;
    }

    + .step > .step-content:after {
        -webkit-border-image:
            -webkit-linear-gradient(left, @color-active-completed 50%, @color-border 50%) 2;
        -moz-border-image:
            -moz-linear-gradient(left, @color-active-completed 50%, @color-border 50%) 2;
        -o-border-image:
            -o-linear-gradient(left, @color-active-completed 50%, @color-border 50%) 2;
        border-image:
            linear-gradient(to right, @color-active-completed 50%, @color-border 50%) 2;
    }
}

.step--complete {
    .step-link {
        color: @color-active-completed;
        pointer-events: auto;
        cursor: pointer;
        &:before { // changes step # to checkmark
            content: "";
            width: @new-step-circle-size;
            height: @new-step-circle-size;
            background-color: white;
            border-color: @color-active-completed;
            color: white;
            .svgicon--checkmark-green;
            background-size: 50%;
            background-position: center;
        }
    }
}

.step--active {
    .step-link {
        color: @color-active-completed;
        font-weight: 700;
        &:before {
            background-color: @color-active-completed;
            border-color: @color-active-completed;
            color: white;
        }
    }
}

@media screen and (max-width: 32rem) {
    .steps {
      overflow: auto;
    }

    .step-link {
        text-indent: -9999em;
    }

    .step-link:before {
        text-indent: 0;
    }
}