@import "./mixin.less";

.change-password-dialog {
  > .dialog-container {
    @apply w-72;

    > .dialog-content-container {
      .flex(column, flex-start, flex-start);

      > .tip-text {
        @apply bg-gray-400 text-xs p-2 rounded-lg;
      }

      > .form-label {
        .flex(column, flex-start, flex-start);
        @apply relative w-full leading-relaxed;

        > .normal-text {
          @apply absolute left-2 py-px pl-1 shrink-0 text-sm text-gray-400 leading-10 transition-all cursor-text;

          &.not-null {
            @apply top-1 bg-white text-xs py-0 px-1 rounded-xl;
          }
        }

        &.input-form-label {
          @apply py-3 pb-1;

          > input {
            @apply w-full p-2 text-sm leading-6 rounded border border-gray-400 bg-transparent;
          }
        }
      }

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

        > .btn {
          @apply text-sm px-4 py-2 rounded mr-2 bg-gray-400;

          &:hover {
            @apply opacity-80;
          }

          &.confirm-btn {
            @apply bg-green-600 text-white shadow-inner;
          }

          &.cancel-btn {
            background-color: unset;
          }
        }
      }
    }
  }
}