.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
}

.form .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form .error {
  color: var(--error-800);
  font-size: 0.875rem;
  min-height: 1.25rem;
}

.form .field label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form .field input,
.form .field textarea {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-xs);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  background-color: var(--gray-200);
  color: var(--gray-900);
  box-shadow: var(--shadow-elevation-2);
}

.form .field textarea {
  field-sizing: content;
  resize: vertical;
  min-height: 35.73px;
}

.form .field input[disabled],
.form .field textarea[disabled] {
  background-color: var(--gray-100);
  color: var(--gray-500);
  cursor: not-allowed;
}

.form .field input[aria-invalid='true'],
.form .field textarea[aria-invalid='true'] {
  border-color: var(--error-700);
  background-color: var(--error-100);
}

.form #turnstile-container {
  min-height: 68px;
}

.form #turnstile-container > div {
  padding-right: 1px;
  overflow: hidden;
}

.form .field button[data-submit-button] {
  align-self: flex-start;
  background-color: var(--primary-700);
  color: var(--gray-100);
  border: none;
  border-radius: var(--radius-xs);
  padding: 0.5rem 2.5rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .form .field button[data-submit-button]:hover {
    background-color: var(--primary-800);
  }
}

.form .field button[data-submit-button]:disabled {
  background-color: var(--gray-400);
  cursor: not-allowed;
}

.form[aria-busy='true'] .field button[data-submit-button] {
  cursor: wait;
}

.form .form-loading {
  width: 100%;
  height: 4px;
}

.form[aria-busy='true'] .form-loading {
  background: linear-gradient(
    to right,
    var(--primary-700) 0%,
    var(--primary-500) 50%,
    var(--primary-700) 100%
  );
  background-size: 200% auto;
  animation: loading 1.5s linear infinite;
  border-radius: var(--radius-xs);
}

@keyframes loading {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}