@import "./mixin.less";

.page-wrapper.signin {
  .flex(row, center, center);
  @apply w-full h-full bg-white;

  > .page-container {
    @apply w-80 max-w-full py-4 -mt-16;

    > .page-header-container {
      @apply flex flex-col justify-start items-start w-full mb-4;

      > .title-text {
        @apply text-2xl;

        > .icon-text {
          @apply text-4xl;
        }
      }

      > .slogan-text {
        @apply mt-2 text-sm text-gray-600;
      }
    }

    > .page-content-container {
      .flex(column, flex-start, flex-start);
      @apply w-full;

      > .form-item-container {
        .flex(column, flex-start, flex-start);
        @apply relative w-full text-base mt-2;

        > .normal-text {
          @apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;

          &.not-null {
            @apply text-sm top-0 leading-4 bg-white rounded;
          }
        }

        &.input-form-container {
          @apply py-2;

          > input {
            @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400;
          }

          &:hover {
            @apply opacity-80;
          }
        }
      }
    }

    > .action-btns-container {
      .flex(row, flex-end, center);
      @apply w-full mt-2;

      > .btn {
        @apply px-1 py-2 text-sm rounded hover:opacity-80;

        &.signin-btn {
          @apply bg-green-600 text-white px-3 shadow;
        }

        &.requesting {
          @apply cursor-wait opacity-80;
        }
      }

      > .btn-text {
        @apply text-sm;
      }

      > .split-text {
        @apply text-gray-400 mx-2;
      }
    }

    > .tip-text {
      @apply w-full text-sm mt-4 text-gray-500 text-right;
    }
  }
}
