/* The form pages: /login, /submit, /edit/{id} and /tokens.
   Loaded in addition to core.css. Selectors are prefixed with `form_`,
   `login_`, `submit_`, `editform_` or `tokens_`, see CONVENTIONS.md. */

@layer forms {
  #submit_form,
  #login_form,
  #editform_form,
  #tokens_form {
    display: block;
  }

  #submit_body,
  #submit_title,
  #editform_body,
  #editform_title {
    width: 100%;
    padding: var(--space-s) 0;
    font-size: 1rem;
    margin-bottom: var(--space-xl);
    resize: vertical;
  }

  #editform_title, #editform_body {
    margin-top: var(--space-s);
  }

  #submit_body,
  #editform_body {
    height: 20rem;
  }

  .editform_edit-btn, .editform_hide-btn, .editform_unhide-btn, .editform_delete-btn {
    padding: var(--space-s) var(--space-m);
  }

  .editform_edit-btn {
    background-color: var(--color-success);
    color: white;
  }

  .editform_delete-btn {
    background-color: var(--color-error);
    color: white;
  }

  .editform_actionbuttonbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space-m);
  }

  /* The row holding the submit button of a post form. */
  .submit_form-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  /* The password row of the login form. */
  .login_form-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: var(--space-m);
    gap: var(--space-s);
  }

  #login_password {
    height: 2rem;
    line-height: 1.5rem;
    width: 10rem;
    margin-right: var(--space-m);
  }

  .form_submit {
    padding: var(--space-s) var(--space-m);
  }

  .form_error {
    color: var(--color-error);
    padding-top: var(--space-m);
  }
}