/**
 * Outline button — contextual color.
 *
 * The outline button reads three tokens that the container redefines based on
 * its own background class (has-<color>-background-color):
 *
 *   --btn-fg        text and border color at rest
 *   --btn-hover-bg  background on hover (default: same as --btn-fg)
 *   --btn-hover-fg  text and border color on hover
 *
 * The tokens are declared ON THE CONTAINER and inherited by the button: a new
 * context costs a single rule. On the button the tokens appear only as
 * fallbacks inside var(), never as declarations, otherwise they would block the
 * value inherited from the container.
 *
 * The border keeps the rest color (--btn-fg) on hover too: it does not change
 * color, so the button does not appear to shrink as it fills in.
 * The extra .wp-element-button class raises specificity above the rules
 * generated by theme.json, so these win regardless of load order.
 */

.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
  color: var(--btn-fg, var(--wp--preset--color--contrast));
  border-color: var(--btn-fg, var(--wp--preset--color--contrast));
  transition:
    background-color var(--wp--custom--transition-duration) var(--wp--custom--transition-timing-function),
    color var(--wp--custom--transition-duration) var(--wp--custom--transition-timing-function);
}

.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus-visible {
  background-color: var(--btn-hover-bg, var(--btn-fg, var(--wp--preset--color--contrast)));
  color: var(--btn-hover-fg, var(--wp--preset--color--base));
}

/* --- Contexts ------------------------------------------------------------ */

/* Dark backgrounds → white outline; hover: white background + color text. */
.has-contrast-background-color {
  --btn-fg: var(--wp--preset--color--base);
  --btn-hover-fg: var(--wp--preset--color--contrast);
}

.has-accent-1-background-color {
  --btn-fg: var(--wp--preset--color--base);
  --btn-hover-fg: var(--wp--preset--color--accent-1);
}

.has-accent-2-background-color {
  --btn-fg: var(--wp--preset--color--base);
  --btn-hover-fg: var(--wp--preset--color--accent-2);
}

.has-accent-4-background-color {
  --btn-fg: var(--wp--preset--color--base);
  --btn-hover-fg: var(--wp--preset--color--accent-4);
}

.has-accent-5-background-color {
  --btn-fg: var(--wp--preset--color--base);
  --btn-hover-fg: var(--wp--preset--color--accent-5);
}

/* Light background → dark outline; hover: dark background + color text. */
.has-accent-3-background-color {
  --btn-fg: var(--wp--preset--color--contrast);
  --btn-hover-fg: var(--wp--preset--color--accent-3);
}

/**
 * Fill button — hover only.
 *
 * Rest colors stay as defined in theme.json (or chosen by hand in the editor).
 * On hover the background darkens toward contrast (#222) with white text, the
 * same in every context. :not(.is-style-outline) covers both the explicit fill
 * and the default without a style class.
 */

.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button {
  transition:
    background-color var(--wp--custom--transition-duration) var(--wp--custom--transition-timing-function),
    color var(--wp--custom--transition-duration) var(--wp--custom--transition-timing-function);
}

/*
 * !important is needed to override WordPress utility classes
 * (.has-…-background-color / .has-…-color are generated with !important).
 */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:focus,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:focus-visible {
  background-color: var(--wp--preset--color--contrast) !important;
  color: var(--wp--preset--color--base) !important;
}

/* Exception: white-background fill → slightly darker hover, not contrast. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button.has-base-background-color:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button.has-base-background-color:focus,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button.has-base-background-color:focus-visible {
  background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, var(--wp--preset--color--contrast)) !important;
  color: var(--wp--preset--color--contrast) !important;
}