// ============================================================================
// :: Step Wizard
// ============================================================================
/**
 * The step-wizard organism is used to display a progress-bar and the content of a step.
 */

// ============================================================================
// :: Root
// ============================================================================
.o-step-wizard {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;

  background-color: $background-color-white;
  border-radius: $border-radius-1x-large;

  @include respond-to($breakpoint-tablet-default) {
    max-width: none;
  }

  @include respond-at($breakpoint-tablet-default) {
    height: auto;
  }

  // the containers needs some top-padding on mobile so they don't stick against the top of this organism.
  .l-container {
    @include respond-to($breakpoint-tablet-default) {
      padding-top: 2rem;
    }
  }
}

// Text zoom: ensure the step wizard uses full width when large
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .o-step-wizard {
    min-width: 100%;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.o-step-wizard__container {
  height: calc(
    100% - 0.7rem
  ); // to compensate for the height of the progress-bar
  flex-grow: 1;

  @include respond-at($breakpoint-tablet-default) {
    padding: 3rem;
    height: auto;
  }

  @include respond-at($breakpoint-desktop-default) {
    padding: 6rem;
  }
}

.o-step-wizard__progress {
  flex-grow: 1;

  @include respond-at($breakpoint-tablet-default) {
    border-radius: $border-radius-1x-large $border-radius-1x-large 0 0;
  }
}

.o-step-wizard__steps {
  width: 100%;
  margin-bottom: 1rem;

  text-align: center;

  @include respond-at($breakpoint-tablet-default) {
    position: absolute;
    top: 2rem;
    right: 6rem;

    width: auto;
    margin: 0;
  }
}