/**
 * Core/button frontend styles
 * These styles are loaded on the frontend.
 * Editor styles are handled by editor.css.
 */

/* ======================================
 * Base styles
 * ====================================== */

.wp-block-button .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--wp--custom--component--button--gap, 8px);
  height: auto !important;
  min-height: var(--wp--custom--semantic--size--m, 40px) !important;
  padding: 0 var(--wp--custom--component--button--padding--left-m, 16px) !important;
  border-radius: var(--wp--custom--semantic--border--radius--base, 6px);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* ======================================
 * Sizes
 * ====================================== */

/* Size Small (32px) */
.wp-block-button .wp-block-button__link.has-button-small-font-size {
  min-height: var(--wp--custom--semantic--size--s, 32px) !important;
  padding: 0 var(--wp--custom--component--button--padding--left-s, 12px) !important;
}

/* Size Medium (40px) */
.wp-block-button .wp-block-button__link.has-button-medium-font-size {
  min-height: var(--wp--custom--semantic--size--m, 40px) !important;
  padding: 0 var(--wp--custom--component--button--padding--left-m, 16px) !important;
}

/* Size Large (48px) */
.wp-block-button .wp-block-button__link.has-button-large-font-size {
  min-height: var(--wp--custom--semantic--size--l, 48px) !important;
  padding: 0 var(--wp--custom--component--button--padding--left-l, 24px) !important;
}

/* ======================================
 * Outline style - Override WP Core defaults
 * ====================================== */

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button[class*='is-style-outline'] .wp-block-button__link {
  background-color: transparent !important;
  color: var(--wp--custom--semantic--color--foreground--action--secondary--default) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--wp--custom--semantic--color--border--action--secondary--default) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button[class*='is-style-outline'] .wp-block-button__link:hover {
  color: var(--wp--custom--semantic--color--foreground--action--secondary--hover) !important;
  border-color: var(--wp--custom--semantic--color--border--action--secondary--hover) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:active,
.wp-block-button[class*='is-style-outline'] .wp-block-button__link:active {
  color: var(--wp--custom--semantic--color--foreground--action--secondary--press) !important;
  border-color: var(--wp--custom--semantic--color--border--action--secondary--press) !important;
}