---
button_font_size_and_weight: "fs-6 fw-600"
---
{{#
/**
 * @name form/free-trial
 * @description A partial for a free trial form
 * @property {string} button_color - Pass `ocean` for ocean, or else it will be `mint`
 * @todo Set up defaults for vars
 * @todo Make it not hardcode <code>ocean</code> "else" <code>mint</code> for <code>button_color</code> var
 */
#}}
{{ global_free_trial_form }}
<form class="{{ if button_color=='ocean' }}cta-form-light{{ else }}cta-form{{ /if }} br-1 mw-100 mb-0 relative s--flex {{ classes }}" data-cta-form novalidate>
  <input type="email" class="bs-soft block m-0 w-100 body fs-4 lh-6 fw-500 input-reset p-4 bs-solid br-1 bw-1 s--mr-2 slate-120 s--w-auto s--flex-grow-1 bc-slate-40" placeholder="{{ free_trial_placeholder or global_free_trial_placeholder }}" data-cta-form-input>
  <p class="mt-2 s--mt-0 bg-strawberry-20 strawberry flex fs-3 lh-3 fw-500 p-2 m-0 br-1 absolute left-0 bottom-0 w-100 pointer-events-none pe-none o-0 invisible error-message" data-cta-form-error-message>
    <i class="flex ai-center mr-2">{{ theme:output src="images/alert.svg" }}</i>
    <span class="inline-block">{{ free_trial_error_message or global_free_trial_error_message }}</span>
  </p>
  <button type="submit" class="bs-soft {{ if button_color=='ocean' }}bg-ocean hover-cta-ocean{{ elseif button_color=='slate-120' }}bg-slate-120 hover-cta-slate{{ else }}bg-mint hover-cta{{ /if }} mt-2 block w-100 br-1 body p-4 button-reset pointer flex-shrink-0 lh-6 p-3 bs-none white s--w-auto s--mt-0 {{ custom_button_font_size_and_weight or button_font_size_and_weight }}" data-cta-form-submit>{{ free_trial_button_text or global_free_trial_button_text }}</button>
</form>
{{ /global_free_trial_form }}