/* Button styles (DA-authored via decorateButtons in scripts/aem.js) */

/* Base — mobile-first: full-width buttons */
a.button:any-link,
button.button {
  display: var(--button-display, flex);
  align-items: center;
  justify-content: center;
  gap: var(--spacing-200);
  max-width: 100%;
  margin: var(--button-margin, var(--spacing-300) 0);
  width: var(--button-width, 100%);
  border: 1px solid transparent;
  border-radius: var(--spacing-650) var(--spacing-400) var(--spacing-650) var(--spacing-400);
  padding: var(--spacing-500) var(--spacing-600);
  min-height: var(--size-56);
  font-family: var(--font-family-accent);
  font-size: var(--font-size-300);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  text-align: center;
  text-decoration: none;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out;
  text-transform: uppercase;
}

/* Hover fill — a bottom-anchored overlay scaled with a composited transform.
   Replaces animating `background-size`, which repaints every frame and caused
   sub-pixel flickering along the button's bottom edge during the animation. */
a.button:any-link::before,
button.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--button-fill, transparent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.25s ease-in-out;
  pointer-events: none;
}

a.button:hover::before,
a.button:focus::before,
button.button:hover::before,
button.button:focus::before {
  transform: scaleY(1);
}

/* Tablet+ — content-hugging width */
@media (width >= 720px) {
  a.button:any-link,
  button.button {
    display: var(--button-display, inline-flex);
    width: var(--button-width, auto);
  }
}

/* ========================================
   Button Container (2+ adjacent buttons)
   Created globally by decorateButtons()
   ======================================== */

/* Mobile: stack buttons vertically, each fills the row */
.button-container {
  display: flex;
  flex-flow: column;
  gap: var(--spacing-400);

  --button-margin: 0;
}

.button-container > p {
  margin: 0;
  padding: 0;
}

/* 510px+: side-by-side, full-width buttons */
@media (width >= 510px) {
  .button-container {
    flex-flow: row wrap;
  }

  .button-container > p {
    flex: 1 1 0;
  }

  .button-container a.button:any-link,
  .button-container button.button {
    white-space: nowrap;
  }
}

/* Tablet+: side-by-side, content-hugging width */
@media (width >= 720px) {
  .button-container > p {
    flex: 0 1 auto;
  }
}

/* Size 48 */
a.button.size-48:any-link,
button.button.size-48 {
  max-height: var(--size-48);
  min-height: var(--size-48);
} 

/* Size 40 */
a.button.size-40:any-link,
button.button.size-40  {
  max-height: var(--size-40);
  min-height: var(--size-40);
} 

/* Icons inside buttons */
button.button .icon,
a.button:any-link .icon {
  width: var(--icon-size-xsm);
  height: var(--icon-size-xsm);
}

/* Icon color handling (icons are <img> SVGs, so we use filter) */
button.button .icon img,
a.button:any-link .icon img {
  /* default: assume the source SVG is black */
  filter: var(--button-icon-filter, none);
}

/* Icon-only buttons (default: 56px square) */
a.button.icon-only:any-link,
button.button.icon-only {
  padding: var(--spacing-0);
  width: var(--size-56);
  height: var(--size-56);
  min-height: var(--size-56);
  min-width: var(--size-56);
}

/* Icon-only small (48px square) */
a.button.icon-only.size-48:any-link,
button.button.icon-only.size-48 {
  width: var(--size-48);
  height: var(--size-48);
  min-height: var(--size-48);
  min-width: var(--size-48);
} 

/* Primary (default) */
a.button:any-link,
a.button.primary:any-link,
button.button,
button.button.primary {
  background-color: var(--button-primary-default);
  color: var(--button-primary-text);
  border-color: var(--border-hover);

  --button-fill: var(--button-alt-primary-hover);
  --button-icon-filter: brightness(0) invert(1); /* white */
}

a.button:focus-visible,
button.button:focus-visible {
  outline: 2px solid var(--button-alt-primary-focus);
  outline-offset: 2px;
}

/* Secondary */
a.button.secondary:any-link,
button.button.secondary {
  background-color: var(--button-secondary-bg-default);
  border: 1px solid var(--button-secondary-stroke-default);
  color: var(--button-secondary-text-default);

  --button-fill: var(--button-secondary-bg-hover);
  --button-icon-filter: none; /* black */
}

a.button.secondary:hover,
a.button.secondary:focus,
button.button.secondary:hover,
button.button.secondary:focus {
  border-color: var(--border-hover);
  color: var(--button-secondary-text-hover);

  --button-icon-filter: brightness(0) invert(1); /* white */
}

/* Inverted (explicit style, or default on dark sections when no variant set) */
.inverted a.button:any-link:not(.primary, .secondary),
.inverted button.button:not(.primary, .secondary),
a.button.inverted:any-link,
button.button.inverted {
  background-color: transparent;
  border: 1px solid var(--button-inverse-default);
  color: var(--button-inverse-default);

  --button-fill: var(--button-inverse-default);
  --button-icon-filter: brightness(0) invert(1); /* white */
}

.inverted a.button:not(.primary, .secondary):hover,
.inverted a.button:not(.primary, .secondary):focus,
.inverted button.button:not(.primary, .secondary):hover,
.inverted button.button:not(.primary, .secondary):focus,
a.button.inverted:hover,
a.button.inverted:focus {
  color: var(--surface-dark);

  --button-icon-filter: none; /* black */
}

/* Disabled (before inverted for no-descending-specificity) */
:is(.button:disabled, .button[disabled]):is(:hover, :not(:hover)) {
  background-color: var(--color-grey-disabled) !important;
  color: var(--text-color-muted) !important;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  cursor: not-allowed !important;
  pointer-events: none;
}

:is(.button.secondary:disabled, .button.secondary[disabled]):is(:hover, :not(:hover)) {
  background: none !important;
  border-color: var(--text-color-muted) !important;
}

:is(.button.inverted:disabled, .button.inverted[disabled]):is(:hover, :not(:hover)) {
  background: none !important;
  border-color: var(--color-white) !important;
  color: var(--color-white) !important;
  opacity: .5;
}