.form--webform button[type=submit] {
  --focus-visible--outline-color: var(--cta-primary--focus-visible--outline-color, currentColor);
  font-size: 1.25rem;
  background-color: var(--cta-primary--bg-color);
  border: 1px solid var(--cta-primary--border--color);
  color: var(--cta-primary--color);
  text-decoration: none;
  padding: 0.8em;
  border-radius: var(--cta-primary--border-radius);
}
.form--webform button[type=submit]:hover, .form--webform button[type=submit]:focus-visible {
  --cta-primary--border--color: var(--cta-primary--border--color--active);
  --cta-primary--border-radius: var(--cta-primary--border-radius--active);
  background-color: var(--cta-primary--bg-color--active, var(--cta-primary--bg-color));
  color: var(--cta-primary--color--active, var(--cta-primary--color));
}

.form--webform {
  /*
   * Make sure flexbox is always using 'display: flex' when toggled via #states.
   * @see https://stackoverflow.com/questions/38491653/jquery-show-a-flex-box/4121
   */
}
.form--webform .webform-flexbox {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.form--webform .webform-flexbox--flex-start {
  align-items: flex-start;
}
.form--webform .webform-flexbox--flex-end {
  align-items: flex-end;
}
.form--webform .webform-flexbox--center {
  align-items: center;
}
@media (width <= 64rem) {
  .form--webform .webform-flexbox {
    flex-direction: column;
  }
}
.form--webform .webform-flex--1 {
  flex: 1;
}
.form--webform .webform-flex--2 {
  flex: 2;
}
.form--webform .webform-flex--3 {
  flex: 3;
}
.form--webform .webform-flex--4 {
  flex: 4;
}
.form--webform .webform-flex--5 {
  flex: 5;
}
.form--webform .webform-flex--6 {
  flex: 6;
}
.form--webform .webform-flex--7 {
  flex: 7;
}
.form--webform .webform-flex--8 {
  flex: 8;
}
.form--webform .webform-flex--9 {
  flex: 9;
}
.form--webform .webform-flex--10 {
  flex: 10;
}
.form--webform .webform-flex--11 {
  flex: 11;
}
.form--webform .webform-flex--12 {
  flex: 12;
}
.form--webform .webform-flexbox.js-webform-states-hidden[style*="display: block"] {
  display: flex !important;
}
