/* ==========================================================================
   Button Component — Koko Mart
   Sliced from Figma node 13:493 "Button" component set
   Tokens mapped from src/tokens/tokens.json via --wp--preset--color--* CSS custom properties

   Variants : primary (default) | secondary | tertiary | ghost | link | destructive
   Sizes     : large (40px)     | medium (32px, default) | small (24px)
   States    : default · hover · active · focus-visible · disabled
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base — every .wp-block-button__link
   -------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link, .wp-element-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);            /* 4px icon gap */
  font-family: var(--wp--preset--font--base);
  font-weight: var(--km-fw-medium) !important;   /* 500 — Figma: Medium */
  font-size: var(--wp--preset--font-size--lg) !important;         /* 14px — Figma: --m size */
  line-height: 20px;                  /* Figma: --s line-height */
  min-height: 32px;                   /* Medium size default */
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg) !important;        /* 8px all sides */
  border-radius: var(--km-radius-sm) !important; /* 6px */
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
  outline: none;
  -webkit-font-smoothing: antialiased;
}

.wc-block-components-button__text {
  font-weight: var(--km-fw-medium) !important;   /* 500 — Figma: Medium */
  font-size: var(--wp--preset--font-size--xl) !important;         /* 14px — Figma: --m size */ 
}

/* Focus ring — 1.5px in --wp--preset--color--primary at -2px inset */
.wp-block-button .wp-block-button__link:focus-visible {
  outline: 1.5px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Size Variants
   Register via is-style-km-lg / is-style-km-sm block styles
   -------------------------------------------------------------------------- */

/* Large — 40px height */
.wp-block-button.is-style-km-lg .wp-block-button__link {
  min-height: 40px;
  padding: var(--wp--preset--spacing--sm);
}

/* Small — 24px height */
.wp-block-button.is-style-km-sm .wp-block-button__link {
  min-height: 24px;
  font-size: var(--wp--preset--fontSizes--md); /* 12px */
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}

/* --------------------------------------------------------------------------
   PRIMARY — default + explicit is-style-km-primary
   bg: --wp--preset--color--primary (#c1382d) | text: white | radius: 6px
   -------------------------------------------------------------------------- */
.wp-block-button:not([class*="is-style"]) .wp-block-button__link,
.wp-block-button.is-style-km-primary .wp-block-button__link.wc-block-cart__submit-container,
.wp-element-button {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-color: transparent;
}

.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover,
.wp-block-button.is-style-km-primary .wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--wp--preset--color--primary-600); /* #a42f26 — darker-10 */
  color: var(--wp--preset--color--white);
}

.wp-block-button:not([class*="is-style"]) .wp-block-button__link:active,
.wp-block-button.is-style-km-primary .wp-block-button__link:active,
.wp-element-button:active {
  background-color: var(--wp--preset--color--primary-700); /* #87261f — darker-20 */
  color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------------
   SECONDARY
   bg: white | border: 1px --wp--preset--color--primary | text: --wp--preset--color--primary | radius: 6px
   Maps to WP built-in is-style-outline + custom is-style-km-secondary
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-km-secondary .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
  border: 1px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-km-secondary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary-100); /* slight tint */
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:active,
.wp-block-button.is-style-km-secondary .wp-block-button__link:active {
  background-color: var(--wp--preset--color--primary-200);
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   TERTIARY
   bg: none | border: 1px --wp--preset--color--neutral-300 | text: --wp--preset--color--primary | radius: 6px
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-km-tertiary .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  border: 1px solid var(--wp--preset--color--neutral-300); /* #d4d4d3 ≈ Figma gray-400 */
}

.wp-block-button.is-style-km-tertiary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--neutral-100);
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--neutral-300);
}

.wp-block-button.is-style-km-tertiary .wp-block-button__link:active {
  background-color: var(--wp--preset--color--neutral-200);
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--neutral-300);
}

/* --------------------------------------------------------------------------
   GHOST / DEFAULT
   bg: none | border: none | text: --wp--preset--color--neutral-900 | radius: 6px
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-km-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--neutral-900);
  border-color: transparent;
}

.wp-block-button.is-style-km-ghost .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--neutral-100);
  color: var(--wp--preset--color--neutral-900);
}

.wp-block-button.is-style-km-ghost .wp-block-button__link:active {
  background-color: var(--wp--preset--color--neutral-200);
  color: var(--wp--preset--color--neutral-900);
}

/* --------------------------------------------------------------------------
   LINK
   bg: none | border: none | text: --wp--preset--color--primary | underlined
   Font: Regular (400) — Figma specifies non-medium weight for Link
   radius: 4px (--wp--preset--border-radius--xs)
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-km-link .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  border-color: transparent;
  text-decoration: underline;
  font-weight: var(--wp--preset--color--fw-regular); /* 400 */
  border-radius: var(--km-radius-sm); /* 4px */
  padding: 0 var(--wp--preset--spacing--xs);
  min-height: auto;
}

.wp-block-button.is-style-km-link .wp-block-button__link:hover {
  color: var(--wp--preset--color--primary-600);
  background-color: transparent;
  text-decoration: underline;
}

.wp-block-button.is-style-km-link .wp-block-button__link:active {
  color: var(--wp--preset--color--primary-700);
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   DESTRUCTIVE (Primary variant)
   bg: #cc1818 (Figma alert-red) | text: white | radius: 8px (--wp--preset--border-radius--lg)
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-km-destructive .wp-block-button__link {
  background-color: #cc1818;
  color: var(--wp--preset--color--white);
  border-color: transparent;
  border-radius: var(--km-radius-lg); /* 8px — Figma uses larger radius for destructive */
}

.wp-block-button.is-style-km-destructive .wp-block-button__link:hover {
  background-color: #b31414;
  color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-km-destructive .wp-block-button__link:active {
  background-color: #991212;
  color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------------
   DISABLED STATE — all variants
   opacity: 0.3 on the label/icon — pointer-events: none
   -------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link[disabled],
.wp-block-button .wp-block-button__link[aria-disabled="true"],
.wp-block-button .wp-block-button__link.is-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}