#signup-page-content {
  border: 1px solid #888;
  padding: 1rem;
  max-width: 700px;
  margin: 1rem auto;

  --count: '0';

  --cssx-disgustingly-set-innerhtml:
    "<h1 class='form-title'>Sign-<b>Up</b></h1>";
  --cssx-children: form#form;
}

.form-title {
  font-size: 2rem;
  padding: 0;
  border-bottom: 1px solid gray;
  font-weight: normal;
  color: gray;
}
.form-title b {
  font-weight: bold;
  color: black;
}

#form {
  display: block;

  --cssx-on-submit:
    prevent-default()
    add-class(form, 'submitting')
    try(
      do(
        request('/examples'),
        add-class(form, 'submitted')
      ),
      js-eval(string('alert("', get-var(--error), '")'))
    )
    remove-class(form, 'submitting')
  ;

  --cssx-children:
    input#input-email
    input#input-password
    #actions
  ;
}
#form.submitted #message::after {
  display: block;
  content: 'Form submitted successfully';
}
#form.submitting #submit-btn {
  pointer-events: none;
  opacity: 0.5;
}

#form input {
  display: block;
  width: 100%;
  padding: 0.4rem 0.8rem;
  margin-top: 1rem;
}

#input-email {
  --cssx-on-mount: set-attr('type', 'email') set-attr('name', 'email')
    set-attr('required', 'true')
    set-attr('placeholder', 'Email. Eg:- mail@postbox.com');
}

#input-password {
  --cssx-on-mount: set-attr('type', 'password') set-attr('name', 'password')
    set-attr('required', 'true')
    set-attr(
      'placeholder',
      'Password. Eg:- password, password1, password2, password123'
    );
}

#actions {
  text-align: right;
  padding-top: 1rem;
  --cssx-children: button#submit-btn;
}

#submit-btn {
  padding: 0.4rem 0.7rem;
  --cssx-on-mount: set-attr('type', 'submit');
}
#submit-btn::after {
  content: 'Sign-Up';
}