@import 'src/styles/partials/utils';
@import 'src/styles/partials/theme';
@import 'src/styles/partials/typography-mixins';

.create-password-page {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.create-password-page-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 480px;
  max-width: 480px;
  padding-left: 16px;
  padding-right: 16px;
  height: fit-content;
  top: 103px;
  position: absolute;
}

.text {
  text-align: center;
  color: $gray-300;
}

.icon {
  color: #ffffff;
  width: 64px;
  height: 64px;
  margin-bottom: 32px;
}
.headline {
  h3 {
    @include h3--semi-bold;
  }
  margin-bottom: 14px;
}

.formik {
  text-align: unset;
  display: flex;
  width: 100%;
  color: $gray-300;
  margin-bottom: 24px;
}

.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}

.confirm-button {
  margin-top: 8px;
}

@media screen and (max-width: 480px) {
  .create-password-page {
    height: 100vh;
  }
  .create-password-page-content {
    min-height: unset;
    min-width: unset;
    justify-content: unset;
    top: 15%;
    width: 100%;
  }
  .icon {
    color: #ffffff;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
  }

  .formik {
    margin-bottom: 16px;
  }

  .confirm-button {
    margin-top: 16px;
  }

  .headline {
    h3 {
      @include h4--semi-bold;
    }
    text-align: center;
  }
}
