/**
 * @stylesheet steps.less Steps
 * @parent signs-steps 2
 *
 * The steps in the A2J Viewer application are also 100% HTML/CSS and use no images. They are nothing more than a `<div>` with `border-radius` of 50% and a background color. In the A2J Viewer, JavaScript is being used to calculate the position and size of each step. By default, a step has no height as this has to be set depending on where the circle is on the sidewalk.
 *
 * @demo demos/steps/demo.html
 *
**/

.app-step {
  position: absolute;
  bottom: 0;
  width: @steps-width;
  height: 100%;
  right: 30%;

  .step-circle {
    position: absolute;
    content: '';
    .border-radius(50%);
    width: 100%;
    right: 0;
  }
}

.step-current {
  width: 100%;
  .vertical-align(absolute);
  z-index: @zindex-popover;

  .app-step {
    height: 100px;
    bottom: -5%;
    //perspective: 200px;

    .step-circle {
      height: 100px;
      bottom: 0;
    }
  }
}

.step-next {
  width: 100%;
  bottom: calc(~"50vh - " @header-height);
  position: absolute;
  padding-left: 5%;
  height: 10%;
  display: none;

  .app-step {
    width: 35%;

    .step-circle {
      height: 40%;
      bottom: 0;
    }
  }
}

// Adjusts when the later steps get assigned display: none, roughly 130px - accomodates where the watermark is shown
@minus-header: ceil(@header-height/1.5);

// Adjust the position of the steps in the background
.next-wrapper {
  .next-2 {
    bottom: calc(~"65% - " @minus-header);

    .step-circle {
      height: 40%;
    }
  }

  .next-3 {
    bottom: calc(~"75% - " @minus-header);

    .step-circle {
      height: 20%;
    }
  }

  .next-4 {
    bottom: calc(~"82% - " @minus-header);

    .step-circle {
      height: 10%;
    }
  }

  .next-5 {
    bottom: calc(~"87% - " @minus-header);

    .step-circle {
      height: 5%;
    }
  }
}

// When there are less than 5 steps
.steps-4 {
  .next-wrapper {
    .next-2 {
      bottom: calc(~"67% - " @minus-header);
    }
    .next-3 {
      bottom: calc(~"79% - " @minus-header);
    }
    .next-4 {
      bottom: calc(~"85% - " @minus-header);
    }
  }
}

.steps-3 {
  .next-wrapper {
    .next-2 {
      bottom: calc(~"69% - " @minus-header);
    }
    .next-3 {
      bottom: calc(~"81% - " @minus-header);
    }
  }
}

.steps-2 {
  .next-wrapper {
    .next-2 {
      bottom: calc(~"72% - " @minus-header);
    }
  }
}

// When there is only one step left, the courthouse is bigger
.steps-left-1 {
  .next-2 {
    bottom: calc(~"74% - " @minus-header);
  }
}

// Hide and show the steps based on viewport height
.steps-2 .next-wrapper .step-next:nth-child(-n+1) {
  display: block;
}
.steps-3 .next-wrapper .step-next:nth-child(-n+2) {
  display: block;
}
.steps-4 .next-wrapper .step-next:nth-child(-n+3) {
  display: block;
}
.steps-5 .next-wrapper .step-next:nth-child(-n+4) {
    display: block !important;
}