@import "../../style/vars_mixins";

.onboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8rem 0;
  padding: 1rem;

  .asking {
    max-width: 690px;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;

    @include themify(day) {
      @apply bg-gray-100;
    }

    @include themify(night) {
      @apply bg-gray-800;
    }

    .reg-details {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .asking-body {
      @media (max-width: $md-break) {
        width: 490px;
      }
      @media (max-width: $sm-break) {
        width: 320px;
      }
    }
  }

  .onboard-svg {
    cursor: pointer;
  }

  .creating {
    display: flex;
    flex-direction: column;
  }

  .creating-confirm {
    display: flex;
    flex-direction: column;
    gap: 15px;

    .creating-confirm-bottom {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;

      .onboard-btn-container {
        display: flex;
        justify-content: center;
        gap: 15px;
      }
    }
  }

  .login-warning {
    display: flex;
    justify-content: center;
  }
}

.create-account-dialog {
  .create-account-dialog-header {
    display: flex;

    .create-account-main-title {
      margin-top: 11px;
    }
  }

  .model-content {
    .confirm-title {
      display: flex;
      justify-content: center;
    }

    .buttons {
      display: flex;
      justify-content: center;

      .cancel-btn {
        margin-left: 25px;
        background: #6c757d;
        border-color: #6c757d;
      }
    }
  }

  .create-account-success-dialog-header {
    .create-account-main-title {
      margin-top: 10px;
    }
  }

  .success-dialog-body {
    margin: 2rem 0 1.4rem 0;

    .success-dialog-content {
      text-align: center;
      margin-bottom: 1.4rem;
    }
  }
}


.onboard-delegate-rc {
  .onboard-check {
    display: flex;
    align-items: center;
    gap: 5px;

    .onboard-checkbox {
      height: 20px;
      width: 20px;
    }
  }
}


@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.onboard-blinking-text {
  color: rgb(179, 95, 26);
  animation: blink 2s infinite;
}
