@require "../../stylus/index.styl";

.oui-login {
  use: stack-y;
  gap: 8;
  padding: 16px;

  .oui-notice {
    margin-bottom: 16px;
  }

  .oui-input,
  .oui-password {
    width: 100%;
  }

  .oui-button {
    width: 100%;
    justify-content: center;
    min-height: 2.25rem;
  }

}



/* Shake animation on login failure */
@keyframes oui-login-shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(7px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(2px); }
}

.oui-login._shake {
  animation: oui-login-shake 0.6s ease-out;
}