.x-modal-onboarding {

  .modal-header {
    @extend %border-bottom-0,
    %pb-0;
  }


  .modal-body {
    @extend %text-center,
            %x-flex-center,
            %flex-column,
            %py-0;

    .x-icon-modal {
      @extend %w-100,
              %pb-4;
      min-height: 12rem;

      @include media-breakpoint-up(md) {
        min-height: 20rem;
      }
      @include x-media-orientation('portrait') {
        min-height: 15rem;
      }
    }

    .x-modal-content {
      @extend %text-center,
              %m-auto;

      @include media-breakpoint-up(md) {
        max-width: 60%;
      }

      .x-title > * {
        font-weight: 500;
      }

      .x-text p:last-child {
        min-height: 4rem;
      }
    }
  }

  .modal-footer {
    @extend %d-flex,
            %border-top-0,
            %py-4;
  }

  &-images {
    @extend %d-flex;
  }

  &-nav {
    @extend %d-flex;
    width: 100%;

    > *:first-child,
    > *:last-child {
      @extend .col-3,
              %px-0;
    }

    > *:last-child {
      text-align: right;
    }
  }

  &-ticker {
    @extend
      .col-6,
      %d-flex,
      %justify-content-center,
      %align-items-center;

    .btn {
      @extend %border-0,
      %p-0,
              .rounded-circle;

      width: 0.625rem;
      height: 0.625rem;
      background-color: theme-color('primary-lighter');
    }

    > * {
      @extend %px-2;

      &.active > .btn {
        @include custom-theme-color(primary, background-color);
      }
    }
  }
}