@import "./mixin.less";

.page-wrapper.signin {
  @apply flex flex-row justify-center items-center w-full min-h-screen 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-700;
      }
    }

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

      > .form-item-container {
        @apply flex flex-col justify-start items-start 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 z-10 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:opacity-80;
          }
        }
      }

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

    > .action-btns-container {
      @apply flex flex-row justify-end items-center 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;
        }
      }
    }

    > .tip-text {
      @apply w-auto inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap;

      &.owner-tip {
        @apply bg-blue-500 text-white px-2 py-1 rounded;
      }
    }
  }
}