/*
 * Button — block styles for core/button (primary, secondary, ghost).
 * Reuse unit: block style. Consumes ONLY token CSS vars (no raw hex/px).
 *
 * Ordering: all plain-variant selectors first, then states (hover/active/focus/
 * disabled), so specificity never descends (stylelint no-descending-specificity).
 *
 * Tokens read:
 *   component.button.bg.primary / primary-hover / primary-active
 *   component.button.text.primary · component.button.radius
 *   component.button.pad-x / pad-y · component.button.min-size
 *   semantic.color.interactive.default / hover · semantic.color.text.brand
 *   semantic.color.border.strong · semantic.color.bg.surface
 *   semantic.color.interactive.focus / disabled · semantic.color.text.muted
 *   semantic.typography.label.* · duration.base · easing.default
 */

/* --- Plain variants ------------------------------------------------------- */

/* Shared base — applies to every WPDL button style. */
.wp-block-button.is-style-wpdl-primary > .wp-block-button__link,
.wp-block-button.is-style-wpdl-secondary > .wp-block-button__link,
.wp-block-button.is-style-wpdl-ghost > .wp-block-button__link,
.wp-block-button.is-style-wpdl-light > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding-inline: var(--wp--custom--semantic--space--component--btn-x);
  padding-block: var(--wp--custom--semantic--space--component--btn-y);
  border: 1px solid transparent;
  border-radius: var(--wp--custom--semantic--radius--btn);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  line-height: var(--wp--custom--semantic--typography--label--line-height);
  letter-spacing: var(--wp--custom--semantic--typography--label--letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    border-color     var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    color            var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    box-shadow       var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    transform        var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* Primary — filled brand. */
.wp-block-button.is-style-wpdl-primary > .wp-block-button__link {
  background-color: var(--wp--custom--semantic--color--button--primary--bg);
  color: var(--wp--custom--semantic--color--button--primary--text);
}

/* Secondary — outline. */
.wp-block-button.is-style-wpdl-secondary > .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--custom--semantic--color--brand--primary);
  border-color: var(--wp--custom--semantic--color--border--strong);
}

/* Ghost — text-only, minimal. */
.wp-block-button.is-style-wpdl-ghost > .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--custom--semantic--color--brand--primary);
  padding-inline: var(--wp--custom--space--2);
}

/* Light — filled white on dark surfaces (e.g. promo banner over a photo). */
.wp-block-button.is-style-wpdl-light > .wp-block-button__link {
  background-color: var(--wp--custom--semantic--color--surface--primary);
  color: var(--wp--custom--semantic--color--text--primary);
}

.wp-block-button.is-style-wpdl-light > .wp-block-button__link:hover {
  background-color: var(--wp--custom--semantic--color--surface--secondary);
  box-shadow: var(--wp--custom--shadow--sm);
  transform: translateY(-0.0625rem);
}

.wp-block-button.is-style-wpdl-light > .wp-block-button__link:focus-visible {
  outline: 3px solid var(--wp--custom--semantic--color--surface--primary);
  outline-offset: 2px;
}

/* --- States --------------------------------------------------------------- */

.wp-block-button.is-style-wpdl-primary > .wp-block-button__link:hover {
  background-color: var(--wp--custom--semantic--color--button--primary--hover-bg);
  box-shadow: var(--wp--custom--shadow--sm);
  transform: translateY(-0.0625rem);
}

.wp-block-button.is-style-wpdl-primary > .wp-block-button__link:active {
  background-color: var(--wp--custom--semantic--color--button--primary--hover-bg);
}

.wp-block-button.is-style-wpdl-secondary > .wp-block-button__link:hover {
  background-color: var(--wp--custom--semantic--color--surface--primary);
  border-color: var(--wp--custom--semantic--color--brand--strong);
  color: var(--wp--custom--semantic--color--brand--strong);
}

.wp-block-button.is-style-wpdl-ghost > .wp-block-button__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Visible focus for keyboard users — token-driven ring on every variant. */
.wp-block-button.is-style-wpdl-primary > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-wpdl-secondary > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-wpdl-ghost > .wp-block-button__link:focus-visible {
  outline: 3px solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 2px;
}

/* Disabled — applies to any variant. */
.wp-block-button.is-style-wpdl-primary > .wp-block-button__link[disabled],
.wp-block-button.is-style-wpdl-primary > .wp-block-button__link[aria-disabled="true"],
.wp-block-button.is-style-wpdl-secondary > .wp-block-button__link[disabled],
.wp-block-button.is-style-wpdl-secondary > .wp-block-button__link[aria-disabled="true"],
.wp-block-button.is-style-wpdl-ghost > .wp-block-button__link[disabled],
.wp-block-button.is-style-wpdl-ghost > .wp-block-button__link[aria-disabled="true"] {
  background-color: var(--wp--custom--semantic--color--border--base);
  border-color: transparent;
  color: var(--wp--custom--semantic--color--text--muted);
  cursor: not-allowed;
  pointer-events: none;
}