/* TEMPORARY TOKENS and COLOR PALETTES */

/* COLOR PALETTES */

:root,
.palette-white,
[data-palette='white'] {
  /* Semantic Design Tokens */

  /* Default */
  --color-bg: var(--color-primary-white); /* Color/Primary/White */
  --color-fg: var(--color-primary-deep-blue); /* Color/Primary/Deep Blue */

  /**
   * CTA Buttons
   */

  /* PRIMARY CTA */
  --color-cta-primary-fg: var(--color-primary-deep-blue);
  --color-cta-primary-bg: var(--color-secondary-mgb-green);
  --color-cta-primary-stroke: currentcolor;

  /* Hover */
  --color-cta-primary-hover-fg: var(--color-primary-deep-blue);
  --color-cta-primary-hover-bg: var(--color-alert-functional-mgb-green-hover);
  --color-cta-primary-hover-stroke: currentcolor;

  /* Pressed */
  --color-cta-primary-active-fg: var(--color-primary-deep-blue);
  --color-cta-primary-active-bg: var(--color-secondary-mgb-green);
  --color-cta-primary-active-stroke: currentcolor;

  /* Focused */
  --color-cta-primary-focus-fg: var(--color-primary-deep-blue);
  --color-cta-primary-focus-bg: var(--color-secondary-mgb-green);
  --color-cta-primary-focus-stroke: currentcolor;
  --color-cta-primary-focus-outline: var(--color-alert-functional-focus);

  /* Disabled */
  --color-cta-primary-disabled-fg: var(--color-alert-functional-disabled-dark);
  --color-cta-primary-disabled-bg: var(--color-alert-functional-disabled-light);
  --color-cta-primary-disabled-stroke: currentcolor;

  /* SECONDARY CTA */
  --color-cta-secondary-fg: var(--color-secondary-mgb-blue);
  --color-cta-secondary-bg: transparent;
  --color-cta-secondary-stroke: currentcolor;

  /* Hover */
  --color-cta-secondary-hover-fg: var(--color-primary-white);
  --color-cta-secondary-hover-bg: var(--color-secondary-mgb-blue);
  --color-cta-secondary-hover-stroke: currentcolor;

  /* Pressed */
  --color-cta-secondary-active-fg: var(--color-deep-blue);
  --color-cta-secondary-active-bg: transparent;
  --color-cta-secondary-active-stroke: currentcolor;

  /* Focused */
  --color-cta-secondary-focus-fg: var(--color-secondary-mgb-blue);
  --color-cta-secondary-focus-bg: transparent;
  --color-cta-secondary-focus-stroke: currentcolor;
  --color-cta-secondary-focus-outline: var(--color-alert-functional-focus);

  /* Disabled */
  --color-cta-secondary-disabled-fg: var(--color-disabled-dark);
  --color-cta-secondary-disabled-bg: transparent;
  --color-cta-secondary-disabled-stroke: currentcolor;

  /* TERTIARY CTA */
  --color-cta-tertiary-fg: var(--color-secondary-mgb-blue);
  --color-cta-tertiary-bg: none;
  --color-cta-tertiary-stroke: currentcolor;

  /* Hover */
  --color-cta-tertiary-hover-fg: var(--color-secondary-mgb-blue);
  --color-cta-tertiary-hover-bg: transparent;
  --color-cta-tertiary-hover-stroke: currentcolor;

  /* Pressed */
  --color-cta-tertiary-active-fg: var(--color-secondary-mgb-blue);
  --color-cta-tertiary-active-bg: transparent;
  --color-cta-tertiary-active-stroke: currentcolor;

  /* Focused */
  --color-cta-tertiary-focus-fg: var(--color-secondary-mgb-blue);
  --color-cta-tertiary-focus-bg: transparent;
  --color-cta-tertiary-focus-stroke: currentcolor;
  --color-cta-tertiary-focus-outline: var(--color-alert-functional-focus);

  /* Disabled */
  --color-cta-tertiary-disabled-fg: var(--color-alert-functional-disabled-dark);
  --color-cta-tertiary-disabled-bg: transparent;
  --color-cta-tertiary-disabled-stroke: currentcolor;
}

.palette-dark-teal,
[data-palette='dark-teal'],
.palette-deep-blue,
[data-palette='deep-blue'] {
  --color-cta-primary-focus-outline: var(--color-primary-white);
  --color-cta-secondary-fg: var(--color-primary-light-teal);
  --color-cta-secondary-focus-fg: var(--color-primary-light-teal);
  --color-cta-secondary-focus-stroke: var(--color-primary-white);
  --color-cta-secondary-focus-outline: var(--color-primary-white);
  --color-cta-secondary-hover-bg: var(--color-primary-medium-teal);
  --color-cta-secondary-hover-fg: var(--color-secondary-mgb-blue);
  --color-cta-secondary-hover-stroke: var(--color-primary-medium-teal);
  --color-cta-secondary-active-fg: var(--color-primary-medium-teal);
  --color-cta-secondary-disabled-fg: var(--color-alert-functional-disabled-light);
  --color-cta-tertiary-fg: var(--color-primary-light-teal);
  --color-cta-tertiary-focus-fg: var(--color-primary-light-teal);
  --color-cta-tertiary-focus-outline: var(--color-primary-white);
  --color-cta-tertiary-hover-fg: var(--color-primary-white);
  --color-cta-tertiary-active-fg: var(--color-primary-medium-teal);
  --color-cta-tertiary-disabled-fg: var(--color-alert-functional-disabled-light);
}

/* /end TEMPORARY TOKENS and COLOR PALETTES */

/* Base CTA Styles */
.cta-button:any-link {
  --gap: var(--spacing-base-space-075);
  --cta-text-size: var(--typography-font-size-body-18);
  --cta-border-width: 1px;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  border: var(--cta-border-width, 1px) solid currentcolor;
  border-radius: 2.4em;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  padding: var(--spacing-base-space-150) var(--spacing-base-space-300);
  font-family: var(--typography-family-body-sans);
  font-size: var(--cta-text-size);
  font-style: normal;
  font-weight: var(--typography-weight-medium);
  line-height: 1.25; /* shorter line-height than Figma for better text-wrapping */
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  vertical-align: middle;
  word-break: keep-all;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    text-decoration 0.2s,
    text-underline 0.2s;
}

.cta-button:focus-visible {
  background-color: var(--color-cta-primary-focus-bg);
  color: var(--color-cta-primary-focus-fg);
  outline: 1px solid var(--color-alert-functional-focus);
  outline-offset: 1px;
}

.cta-button:hover {
  background-color: var(--color-cta-primary-hover-bg);
  color: var(--color-cta-primary-hover-fg);
}

.cta-button:active {
  background-color: var(--color-cta-primary-active-bg);
  color: var(--color-cta-primary-active-fg);
}

.cta-button.disabled {
  background-color: var(--color-cta-primary-disabled-bg) !important;
  color: var(--color-cta-primary-disabled-fg) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* CTA Icons */

/* Set icon size to 24px or 1.5rem  */
.cta-button .icon {
  --icon-size: var(--spacing-base-space-300);

  flex-shrink: 0;
}

/* Reverse the order, except for phone or back links */
.cta-button[data-function='phone']:has(> .icon),
.cta-button[data-function='email']:has(> .icon),
.cta-button[data-function='back']:has(> .icon) {
  flex-direction: row-reverse;
}

/* Primary CTA */
.cta-button.primary {
  background-color: var(--color-cta-primary-bg);
  border-color: var(--color-cta-primary-stroke);
  color: var(--color-cta-primary-fg);
}

.cta-button.primary:focus-visible {
  background-color: var(--color-cta-primary-focus-bg);
  border-color: var(--color-cta-primary-focus-stroke);
  color: var(--color-cta-primary-focus-fg);
  outline-color: var(--color-cta-primary-focus-outline);
}

.cta-button.primary:hover {
  background-color: var(--color-cta-primary-hover-bg);
  border-color: var(--color-cta-primary-hover-stroke);
  color: var(--color-cta-primary-hover-fg);
}

.cta-button.primary:active {
  background-color: var(--color-cta-primary-active-bg);
  border-color: var(--color-cta-primary-active-stroke);
  color: var(--color-cta-primary-active-fg);
}

/* Secondary CTA */
.cta-button.secondary {
  background-color: var(--color-cta-secondary-bg);
  border-color: var(--color-cta-secondary-stroke);
  color: var(--color-cta-secondary-fg);
}

.cta-button.secondary:focus-visible {
  background-color: var(--color-cta-secondary-focus-bg);
  border-color: var(--color-cta-secondary-focus-stroke);
  color: var(--color-cta-secondary-focus-fg);
  outline-color: var(--color-cta-secondary-focus-outline);
}

.cta-button.secondary:hover {
  background-color: var(--color-cta-secondary-hover-bg);
  border-color: var(--color-cta-secondary-hover-bg);
  color: var(--color-cta-secondary-hover-fg);
}

.cta-button.secondary:active {
  background-color: var(--color-cta-secondary-active-bg);
  border-color: var(--color-cta-secondary-active-stroke);
  color: var(--color-cta-secondary-active-fg);
}

/* Tertiary CTA */
.cta-button.tertiary {
  background-color: var(--color-cta-tertiary-bg);
  border-color: transparent;
  color: var(--color-cta-tertiary-fg);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: all;
  text-underline-offset: 0.375em;
}

.cta-button.tertiary:not(:has(.icon)) {
  /* show underline on .tertiary with no icons */
  text-decoration-color: currentcolor;
}

.cta-button.tertiary:has(.icon) {
  /* but hide underline on .tertiary with icons */
  text-decoration-color: transparent;
}

.cta-button.tertiary:hover {
  background-color: var(--color-cta-tertiary-hover-bg);
  color: var(--color-cta-tertiary-hover-fg);
}

.cta-button.tertiary:focus-visible {
  background-color: var(--color-cta-tertiary-focus-bg);
  color: var(--color-cta-tertiary-focus-fg);
  outline-color: var(--color-cta-tertiary-focus-outline);
}

.cta-button.tertiary:active {
  background-color: var(--color-cta-tertiary-active-bg);
  color: var(--color-cta-tertiary-active-fg);
}

.cta-button.tertiary:not(:has(.icon)):hover {
  /* hide underline on .tertiary with no icons */
  text-decoration-color: transparent;
}

.cta-button.tertiary:has(.icon):hover {
  /* but show underline on .tertiary with icons */
  text-decoration-color: currentcolor;
}

.cta-button.tertiary:not(:has(.icon)):focus-visible {
  /* hide underline on .tertiary with no icons */
  text-decoration-color: transparent;
}

.cta-button.tertiary:has(.icon):focus {
  /* but show underline on .tertiary with icons */
  text-decoration-color: currentcolor;
}

/* CTA Button Group (cluster) */
.cta-wrapper.cluster {
  --cluster-gutter: var(--spacing-base-space-150);
}

@media (width <= 600px) {
  .cta-wrapper.cluster {
    justify-content: center;
    text-align: center;
  }

  .cta-wrapper.cluster > div {
    width: 100%;
  }

  .cta-button:any-link {
    display: flex;
  }
}