@include body-class() {

  &[class*="wpmudev-onboarding"] {
    background-color: $dashui-onboarding-page;
  }
}

@include body-class(true) {

  .dashui-onboarding {

    .dashui-onboarding-header,
    .dashui-onboarding-body,
    .dashui-onboarding-footer {

      &:first-child {

        @include media(max-width, md) {
          margin-top: #{$sui-gutter-md * 2};
        }
      }

      + div {

        @include media(max-width, md) {
          margin-top: #{$sui-gutter-md * 2};
        }

        @include media(min-width, md) {
          margin-top: $sui-gutter;
        }
      }
    }

    .dashui-onboarding-header,
    .dashui-onboarding-footer {
      flex: 0 0 auto;
    }

    .dashui-onboarding-body {
      flex: 1;

      &.dashui-onboarding-content-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .dashui-onboarding-logo {
        height: auto;
        margin: 30px;
        max-width: 60px;
      }
    }

    .dashui-onboarding-footer {
      text-align: center;
    }

    .sui-description {
      line-height: 22px;
    }

    @include media(max-width, md) {
      display: block;
    }

    @include media(min-width, md) {
      min-height: calc(100vh - 132px);
      display: flex;
      flex-direction: column;
    }
  }
}