// RAMEN STEPPER COMPONENT
//
// N/A
//
//
// Required Component Variables:
//
// $stepper-font-size: Font size of the step label
// $stepper-font-size-medium: Font size of the step label at medium breakpoint
// $stepper-number-font-size: ont-size of the step number
// $stepper-number-font-size-medium: Font-size of the step number at medium breakpoint
// $stepper-number-size: Size of the step number
// $stepper-number-size-medium:  Size of the step number at medium breakpoint
// $stepper-number-bg-color: BG colour of the step number
// $stepper-number-font-color: Font colour of the step number
// $stepper-number-border-radius: Radius of the step number
// $stepper-line-color: Colour of horizontal line between step numbers
// $stepper-line-size: Height of horizontal line between step numbers
// $stepper-line-spacing: Space between number and horizontal line
// $stepper-line-spacing-medium: Space between number and horizontal line at medium breakpoint
//
//

@mixin stepper {
  counter-reset: stepper-counter;
  display: flex;
  font-size: $stepper-font-size;
  width: 100%;

  @include breakpoint($bp-medium) {
    font-size: $stepper-font-size-medium;
  }
}

@mixin stepper-step {
  flex: 1 1 auto;
  padding-top: $stepper-number-size;
  position: relative;
  text-align: center;

  @include breakpoint($bp-medium) {
    padding-top: $stepper-number-size-medium;
  }

  // Step number
  &:before {
    background-color: $stepper-number-bg-color;
    border-radius: $stepper-number-border-radius;
    color: $stepper-number-font-color;
    content: counter(stepper-counter);
    counter-increment: stepper-counter;
    display: block;
    font-size: $stepper-number-font-size;
    height: $stepper-number-size;
    left: 50%;
    line-height: $stepper-number-size;
    opacity: 0.7;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translateX(-50%);
    width: $stepper-number-size;

    @include breakpoint($bp-medium) {
      font-size: $stepper-number-font-size-medium;
      height: $stepper-number-size-medium;
      line-height: $stepper-number-size-medium;
      width: $stepper-number-size-medium;
    }
  }

  // Horizontal line between each step number
  &:after {
    background-color: $stepper-line-color;
    content: '';
    display: block;
    height: $stepper-line-size;
    left: -50%;
    left: calc(-50% + #{$stepper-number-size - ($stepper-number-size / 2) + $stepper-line-spacing});
    opacity: 0.5;
    position: absolute;
    top: $stepper-number-size / 2;
    width: 100%;
    width: calc(100% - #{$stepper-number-size + ($stepper-line-spacing * 2)});

    @include breakpoint($bp-medium) {
      left: calc(-50% + #{$stepper-number-size-medium - ($stepper-number-size-medium / 2) + $stepper-line-spacing-medium});
      top: $stepper-number-size-medium / 2;
      width: calc(100% - #{$stepper-number-size-medium + ($stepper-line-spacing-medium * 2)});
    }
  }

  &:first-child {
    // Hide the horizontal line on the left of first item
    &:after {
      display: none;
    }
  }

  // Current step
  &.is-current {
    pointer-events: none;

    &:before {
      opacity: 1;
    }

    .c-stepper__label {
      opacity: 1;
    }
  }
}

@mixin stepper-label {
  &,
  &:link,
  &:visited {
    display: block;
    opacity: 0.5;
    padding: $spacing-xsmall $spacing-xxsmall;

    @include breakpoint($bp-medium) {
      padding-left: $spacing-xsmall;
      padding-right: $spacing-xsmall;
    }
  }

  &:link,
  &:visited {
    text-decoration: none;

    &:hover,
    &:active {
      text-decoration: underline;
    }

    &:focus {
      text-decoration: underline;
    }
  }
}

.c-stepper {
  @include stepper;

  &__step {
    @include stepper-step;
  }

  &__label {
    @include stepper-label;
  }

  &--progress {
    .c-stepper__step {
      padding-top: 0;

      &:before,
      &:after {
        display: none;
      }

      // Active styling (step is current or past)
      &.is-active {
        &:after {
          bottom: 0;
          display: block;
          left: auto;
          opacity: 1;
          right: 0;
          top: auto;
          width: 100%;
        }
      }

      // Current sep
      &.is-current {
        pointer-events: none;

        .c-stepper__label {
          font-weight: bold;
        }
      }
    }

    .c-stepper__label {
      opacity: 1;
      padding-bottom: toRems(15px);
      padding-top: toRems(15px);
    }
  }
}