jelhan/croodle

$steps-border-width: 5px;

.cr-steps-top-nav {
  margin-bottom: map-get($spacers, 5);
  flex-direction: column;
  width: 100%;

  @include media-breakpoint-up(md) {
    flex-direction: row;
    width: auto;
  }

  &__button {
    text-align: left;
    border-width: 0;
    border-left-width: $steps-border-width;

    &:not(:first-child) {
      margin-left: 0 !important;
    }

    @include media-breakpoint-up(md) {
      text-align: inherit;
      border-left: 0;
      border-right: 0;
    }

    &:not(:disabled) {
      border-left-color: gray("300");

      @include media-breakpoint-up(md) {
        border-bottom: $steps-border-width solid gray("300");
      }
    }

    &.is-active {
      border-left-color: theme-color-level("primary", 2);

      @include media-breakpoint-up(md) {
        border-bottom: $steps-border-width solid theme-color-level("primary", 2);
      }
    }
  }
}

$bottom-nav-height: 5.5em;

.cr-form-wrapper {
  padding-bottom: $bottom-nav-height;

  @include media-breakpoint-up(md) {
    padding-bottom: 0;
  }
}

.cr-steps-bottom-nav {
  margin-top: map-get($spacers, 4);
  padding-top: map-get($spacers, 4);
  padding-bottom: map-get($spacers, 4);
  border-top: 2px solid gray("100");
  background: $body-bg;
  height: $bottom-nav-height;
  z-index: 9;
  position: fixed;
  bottom: 0;
  left: $grid-gutter-width / 2;
  right: $grid-gutter-width / 2;

  @include media-breakpoint-up(md) {
    margin-top: map-get($spacers, 5);
    padding-top: map-get($spacers, 5);
    padding-bottom: map-get($spacers, 5);
    background: transparent;
    position: static;
    bottom: auto;
    left: auto;
    right: 0;
  }

  &__button {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    @include media-breakpoint-up(md) {
      width: auto;
    }
  }

  &__prev-button .cr-steps-bottom-nav__label {
    margin-left: map-get($spacers, 3);
  }

  &__next-button .cr-steps-bottom-nav__label {
    margin-right: map-get($spacers, 3);
  }

  &__next-button {
    justify-content: flex-end;

    @include media-breakpoint-up(md) {
      justify-content: normal;
    }
  }
}