// RAMEN FORM STEPPER COMPONENT
//
//
// Required Global Variables:
//
// N/A
//
//
// Required Component Variables:
//
// N/A
//
//

@mixin form-stepper {
  position: relative;
  z-index: 1;

  @include breakpoint($bp-medium) {
    -webkit-overflow-scrolling: touch;
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }
}

@mixin form-stepper-back-button {
  border-color: $c-white;
  left: toRems(35px);
  position: absolute;
  top: $spacing-medium;
  z-index: 2;

  @include breakpoint($bp-medium) {
    left: 0;
  }
}

@mixin form-stepper-container {
  @include breakpoint($bp-medium) {
    height: auto;
    margin: 0 auto;
    max-width: $max-site-width;
    min-height: calc(100vh - 60px); // Full height minus header
    overflow: visible;
    position: relative;
  }
}

@mixin form-stepper-frame {
  -webkit-overflow-scrolling: touch;
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  overflow: auto;
  right: 0;
  top: toRems(130px);

  @include breakpoint($bp-medium) {
    overflow: visible;
    padding: toRems(55px);
    position: absolute;
    top: 0;
  }
}

@mixin form-stepper-animations {
  // remove overflow when animating
  &.slide-exit-active,
  &.slide-enter-active {
    overflow: hidden;
  }

  // Exit animations
  &.slide-exit {
    .c-form-stepper__steps,
    .c-form-stepper__field,
    .c-form-stepper__actions {
      transform: none;
      opacity: 1;
    }

    .c-form-stepper__steps,
    .c-form-stepper__field:first-child {
      transition: transform 400ms $animation-easing-exit,
        opacity 400ms $animation-easing-exit;
    }
    .c-form-stepper__actions,
    .c-form-stepper__field:not(:first-child) {
      transition: transform 400ms $animation-easing-exit 100ms,
        opacity 400ms $animation-easing-exit 100ms;
    }
  }

  &.slide-exit-active {
    .c-form-stepper__steps,
    .c-form-stepper__field {
      transform: translateY(-400px);
      opacity: 0;
    }

    @include breakpoint($bp-medium) {
      .c-form-stepper__actions {
        transform: translateY(-400px);
        opacity: 0;
      }
    }
  }

  // Enter animations
  &.slide-enter {
    .c-form-stepper__steps,
    .c-form-stepper__field {
      transform: translateY(400px);
      opacity: 0;
    }

    @include breakpoint($bp-medium) {
      .c-form-stepper__actions {
        transform: translateY(400px);
        opacity: 0;
      }
    }

    .c-form-stepper__steps,
    .c-form-stepper__field:first-child {
      transition: transform 400ms $animation-easing-enter 200ms,
        opacity 400ms $animation-easing-enter 200ms;
    }

    .c-form-stepper__actions,
    .c-form-stepper__field:not(:first-child) {
      transition: transform 300ms $animation-easing-enter 300ms,
        opacity 300ms $animation-easing-enter 300ms;
    }
  }

  &.slide-enter-active {
    .c-form-stepper__steps,
    .c-form-stepper__field,
    .c-form-stepper__actions {
      transform: none;
      opacity: 1;
    }
  }
}

@mixin form-stepper-inner {
  margin: auto;
  max-width: toRems(530px);
  padding: toRems(35px) toRems(35px) toRems(100px);
  position: relative;
  width: 100%;

  @include breakpoint($bp-medium) {
    padding: toRems(80px) toRems(35px);
  }
}

@mixin form-stepper-fields {
  margin-bottom: toRems(40px);
}

@mixin form-stepper-field {
  margin-bottom: toRems(35px);

  &.is-inline {
    @include breakpoint($bp-medium) {
      display: inline-block;
      margin-right: $spacing-base;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@mixin form-stepper-dots {
  display: none;

  @include breakpoint($bp-medium) {
    display: block;
    position: absolute;
    right: $spacing-medium;
    top: 50%;
    transform: translateY(-50%);
  }
}

@mixin form-stepper-dot {
  button {
    background-color: $c-black;
    border-radius: 100%;
    height: toRems(12px);
    text-indent: -9999px;
    transition: background-color $global-transition-speed $global-easing;
    white-space: nowrap;
    width: toRems(12px);
  }

  &.is-active {
    button {
      background-color: $c-black;
    }
  }
}

.c-form-stepper {
  @include form-stepper;

  &__container {
    @include form-stepper-container;
  }

  &__back-button {
    @include form-stepper-back-button;
  }

  &__frame {
    @include form-stepper-frame;
    @include form-stepper-animations;
  }

  &__inner {
    @include form-stepper-inner;
  }

  &__fields {
    @include form-stepper-fields;
  }

  &__field {
    @include form-stepper-field;
  }

  &__dots {
    @include form-stepper-dots;
  }

  &__dot {
    @include form-stepper-dot;
  }
}