@use '@scssutils' as *;

#enrollment-page {
  h1 {
    display: none;

    @include media-breakpoint-up(lg) {
      display: block;
    }

    @include typography(app-title);

    color: var(--text-body-primary);
    user-select: none;
  }

  h3 {
    @include typography(app-body-1);

    color: var(--text-body-primary);
  }

  header {
    margin-bottom: 26px;
    user-select: none;
  }

  .page-content {
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;

    & > .message-box-spacer {
      align-self: stretch;

      @include media-breakpoint-up(lg) {
        padding: 50px 0;
      }

      & > .message-box {
        padding: var(--spacing-s);
        display: flex;
        justify-content: center;
        gap: var(--spacing-s);
      }
    }

    .message-box.type-info.variant-filled {
      background-color: var(--surface-tag-modal);

      @include media-breakpoint-down(lg) {
        background-color: var(--surface-info-modal);
      }
    }

    @include media-breakpoint-down(lg) {
      background-color: var(--surface-default-modal);
    }

    @include media-breakpoint-up(lg) {
      padding: 64px 75px;
    }

    & > .settings {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      max-width: 100%;
      row-gap: 26px;
      column-gap: 50px;

      @include media-breakpoint-up(xxl) {
        flex-flow: row nowrap;
      }

      .message-box-spacer {
        padding-bottom: 26px;
      }

      & > .left,
      & > .right {
        width: 100%;
        display: flex;
        flex-flow: column;
        row-gap: 26px;

        @include media-breakpoint-up(xl) {
          max-width: 750px;
        }

        @include media-breakpoint-up(xxl) {
          max-width: 1000px;
        }

        & > * {
          width: 100%;
        }
      }
    }
  }
}
