/* #region "../src/elements/donation-cta/donation-cta.scss" */
/*
- type: css
*/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.donation-cta {
  container: donation/inline-size;
  padding: clamp(1.25rem, -0.0480769231rem + 5.7692307692vw, 5rem) clamp(1.25rem, -0.4807692308rem + 7.6923076923vw, 6.25rem);
  border-radius: var(--base-radius);
  background-color: var(--red-800);
  color: var(--white);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAxIiBoZWlnaHQ9IjM4MiIgdmlld0JveD0iMCAwIDMwMSAzODIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgNi43MmM4Mi4wOC0xNS4xIDE1Ni45My01LjEgMjEwLjU2IDM0LjcyIDkzLjMyIDY0LjYyIDExMC45OSAxOTYuNDYgNjUuMjIgMzM5LjY1SDk5LjI0YzQxLjE3LTkxLjIyIDUxLjItMTgxLjg0IDEzLjE2LTI0MC40MkM5NS45MyAxMTUuMzEgNTQuNTggMTAyLjc0IDAgMTA3LjgyVjYuNzJaIiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjc4IiBoZWlnaHQ9IjQyNCIgdmlld0JveD0iMCAwIDI3OCA0MjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIyMi45LjA4Yy00NC40NCA4My43NC02My42MyAxNzAuNjMtNDkuMTkgMjM4LjcgMy4yMyAxNS4yOCA4LjEyIDI5LjY1IDE0Ljg0IDQyLjc4IDIwLjg4IDQyLjY1IDUxLjAxIDY4LjIgODkuNDUgNzguNDJWNDIwYy03My4yIDkuMjQtMTM5LjM2LTIuNDgtMTg4LjE4LTM4LjYyLTEwMi40LTcxLjU2LTExNC4xLTIyMi41My01MS4xLTM4MS4zSDIyMi45WiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIwLjEiLz48L3N2Zz4=);
  background-position: bottom left, top right;
  background-repeat: no-repeat;
  background-size: min(301px, 60%), min(278px, 60%);
}
.donation-cta .content {
  text-wrap: balance;
  max-width: 700px;
}
.donation-cta .content > :first-child, .donation-cta .content > link:first-child + *, .donation-cta .content > .lead-text:first-child > *:first-child {
  margin-top: 0;
}
.donation-cta .content > :last-child, .donation-cta .content > .lead-text:last-child > *:last-child {
  margin-bottom: 0;
}
.donation-cta .amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(1.5rem, 1.2836538462rem + 0.9615384615vw, 2.125rem);
  margin-bottom: clamp(1.5rem, 1.0673076923rem + 1.9230769231vw, 2.75rem);
}
@container (width > 720px) {
  .donation-cta .amounts {
    display: flex;
    flex-wrap: wrap;
  }
}
.donation-cta .amounts button {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
  word-spacing: inherit;
  white-space: nowrap;
  background: none;
  color: inherit;
  text-align: left;
  background-color: var(--white);
  color: var(--black);
  display: flex;
  align-items: baseline;
  padding: 1rem 1.125rem;
  border-radius: var(--base-radius);
  cursor: pointer;
  --focus-color: var(--white);
}
:root.no-focus-visible .donation-cta .amounts button:focus {
  outline: 2px solid var(--focus-color, var(--primary));
  outline-offset: var(--focus-offset, 3px);
}

.donation-cta .amounts button:focus:not(:focus-visible) {
  outline: none;
}
.donation-cta .amounts button:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary));
  outline-offset: var(--focus-offset, 3px);
}
.donation-cta .amounts button[aria-pressed=true] {
  background-color: var(--black);
  color: var(--white);
}
.donation-cta .amounts button:last-child {
  grid-column: 1/-1;
  gap: 0.5rem;
}
.donation-cta .amounts button:last-child input {
  flex-grow: 1;
  text-align: right;
  line-height: 1;
}
.donation-cta .amounts button:last-child input:focus {
  outline: none;
  border-color: var(--primary);
}
.donation-cta .amounts .number {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  font-size: clamp(2.75rem, 2.6634615385rem + 0.3846153846vw, 3rem);
  margin: 0;
}
.donation-cta .amounts .currency {
  padding-left: 0.5ch;
  font-size: 0.937rem;
}
.donation-cta .amounts input {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
  word-spacing: inherit;
  white-space: nowrap;
  background: none;
  color: inherit;
  text-align: left;
  color: inherit;
  border-bottom: 2px solid currentColor;
  width: 5ch;
}
.donation-cta .cta:not(.amounts + *) {
  margin-top: clamp(1.5rem, 1.0673076923rem + 1.9230769231vw, 2.75rem);
}
/* #endregion "../src/elements/donation-cta/donation-cta.scss" */

head{--webpack--css-wpce--donation-cta:&\.\.\/src\/elements\/donation-cta\/donation-cta\.scss;}
/*# sourceMappingURL=css-wpce--donation-cta.css.map*/