@use '../../../../style/core/utilities.scss' as utilities;

.dnb-forms-wizard-layout {
  display: flex;
  flex-flow: column wrap;
  justify-content: stretch;
  align-items: stretch;
  column-gap: var(--spacing-x-large);

  &__indicator {
    flex: 0;
    margin-bottom: 2rem;
  }

  &__contents {
    flex: 1;

    .dnb-forms-step {
      outline: none;
    }

    .dnb-forms-step > .appear-fx,
    .dnb-forms-button-row > .appear-fx {
      --appear-opacity: 0;
      --appear-offset: -0.25rem;

      opacity: var(--appear-opacity);
      transform: translate3d(var(--appear-offset), 0, 0);

      animation: appear 600ms var(--easing-default) forwards;
      animation-delay: calc(var(--element-index, 0) * 30ms);

      @keyframes appear {
        0% {
          opacity: var(--appear-opacity);
          transform: translate3d(var(--appear-offset), 0, 0);
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
    }
  }

  @include utilities.allBelow('medium') {
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    &__contents {
      flex-basis: auto;
    }
  }
}