/* Contact form (iframe): HTMX submit spinner
 * https://htmx.org/attributes/hx-indicator/ — default indicator is the request element (the form);
 * child with .htmx-indicator is shown while .htmx-request is on the ancestor.
 *
 * Colours: names/values from frontend/_sass/_variables.scss.
 */

.contact-form {
  --primary: #172d56;
  --accent: #f3bf01;
  --mid-gray: #e0e0e0;
  --dark-gray: #555555;
}

@keyframes contact-form-spin {
  to {
    transform: rotate(360deg);
  }
}

.contact-form .htmx-indicator {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-form.htmx-request .htmx-indicator {
  display: inline-flex;
}

.contact-form.htmx-request .contact-form__submit-label {
  display: none;
}

.contact-form__submit-spinner-icon {
  animation: contact-form-spin 0.7s linear infinite;
}

/* Match .btn--accent (hover uses same $accent as default) */
.contact-form #contact-submit:not(:disabled):hover {
  background: var(--accent);
  color: var(--primary);
  text-decoration: none;
}

/* Grey submit while the form has `htmx-request`; `hx-disable` also sets :disabled on the button */
.contact-form.htmx-request #contact-submit,
.contact-form #contact-submit:disabled {
  background: var(--mid-gray);
  color: var(--dark-gray);
  cursor: not-allowed;
}

.contact-form.htmx-request #contact-submit:hover,
.contact-form #contact-submit:disabled:hover {
  background: var(--mid-gray);
  color: var(--dark-gray);
}