.login {
  @apply h-screen relative bg-[url('/assets/images/hero-login.png')] bg-cover;
  &__logo {
    &__logo-cont {
      @apply w-32 h-32 relative;
      &__logo-img {
        @apply left-28;
      }
    }
  }

  &__container {
    @apply bg-white w-[30rem] max-h-[25rem] rounded-md absolute top-1/2 -translate-y-1/2 left-28 p-16;

    &__header {
      @apply text-2xl font-bold;
    }

    &__sub-header {
      @apply text-lg text-gray-400 font-light;
    }

    &__form {
      &__otp-info {
        @apply text-xs text-danger my-5;
      }

      &__otp-cont {
        @apply mb-5;
        &__otp-group {
          &__otp-slot {
            @apply bg-gray-1/25;
          }
        }
        &__error-msg {
          @apply text-xs text-danger;
        }
      }

      &__countdown-cont {
        @apply text-xs mb-5 font-semibold text-center;
        &__number {
          @apply font-bold text-danger;
        }
      }

      &__submit-btn {
        @apply w-full;
      }
    }

    &__otp-form {
      @apply mt-5;
      &__container {
        @apply flex gap-1;

        &__submit-btn {
          @apply text-white text-sm cursor-pointer;
        }

        &__submit-btn__not-allow {
          @apply text-white text-sm cursor-wait opacity-50;
        }
      }

      &__email-error-msg {
        @apply text-xs text-danger;
      }
    }
  }
}