// ------------------------------------\
// ONBOARDING
// NB: The onboarding component is archived
// ------------------------------------/

.onboarding-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 1140px;
  height: 1140px;
  margin-top: -570px;
  margin-left: -570px;
  text-align: center;
  opacity: 0;
  transform: translateZ(0);
  @include media-breakpoint-up(sm) {
    transition: transform 0.45s ease-in, top 0.1s ease-out, left 0.1s ease-out;
  }
}

.onboarding-neutral {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  background: $blue-darker;
  opacity: 0.9;
}


.a-js-circle {
  position: absolute;
  top: 50%;
  box-sizing: content-box;
  width: 80px;
  height: 80px;
  margin-top: -2040px;
  margin-left: -2040px;
  background-color: transparent;
  border: solid 2000px $blue-darker;
  border-radius: 999999px;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  @include media-breakpoint-up(sm) {
    transition: background-color 0.35s ease-in;
  }
}

// MODAL ONBOARDING
.a-onboarding {
  overflow: hidden;
  color: $white;
  background: transparent;
  box-shadow: none;

  .modal-backdrop {
    background: $blue-darker;
  }

  .a-modal-top {
    .a-modal-top-user {
      .a-personSwitcher {
        color: $white;
      }
    }
  }

  .a-modal-bottomBG {
    margin: auto;
    margin-top: 310px;
  }

  .modal-dialog {
    margin: 0 auto;
	}

  .modal-content {
    padding: 0 24px;
    background: transparent;
    box-shadow: none;

    .modal-header {
      padding: 0;
      padding-bottom: $spacer * 2;
      border-bottom: none;

      .modal-title {
        @include a-fontSize36;
      }
  	}

    .modal-body {
      padding: 0;

      .a-leadText {
        @include a-fontSize28;
        @include a-fontLight;
        margin-bottom: 0;
      }

      .a-textureLines {
        padding-top: 10px;
        margin-top: $spacer * 2;
        cursor: pointer;

        .a-js-btnCopy {
          cursor: pointer;
        }
      }
    }

    .modal-footer {
      padding: 0;
      margin-top: $spacer * 3;
      text-align: left;
      border-top: none;
      justify-content: flex-start;
  	}
	}

  &.show {
    & ~ .a-containerFooter {
      padding-bottom: $spacer * 25; //enable scrolling for onboarding
    }
  }
}