/*
 * Marketing UI Button
 * Figma: MARTA - Website / Button (13:1685)
 *
 * Documented axes only (docs/component-spec.md):
 *   Variant: contained | outline | text | link
 *   Size: extra-small | small | medium | large
 *   Style: light | dark
 *
 * Defaults match the Figma generated component: Contained / Large / Light.
 * State=Light is omitted — it is the only State value and is not an
 * interaction state.
 *
 * Size=small exists on Link only. Contained/Outline/Text Small is not in Figma.
 *
 * Colors use brand mode variables (--color-100, --color-900, …). Place the
 * button inside [data-brand="pink"|"blue"|"violet"|"softy"]. There is no
 * default brand on :root.
 *
 * Resting appearance is the first row of each unique name in Figma
 * (Light y=22/30, Dark y=492/500). Duplicate unlabeled rows (other fills,
 * underline, gray) are not named hover/focus/disabled/pressed and are not
 * implemented. Native focus outline is left unchanged.
 */

.mkt-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  gap: var(--button-gap);
  height: var(--button-height-lg);
  padding-block: var(--button-padding-block-lg);
  padding-inline: var(--button-padding-inline-lg);
  border-radius: var(--button-radius);
  background: var(--color-100);
  color: var(--color-900);
  box-shadow: none;
  font-family: var(--font-family-lexend);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.mkt-button__label {
  flex: 0 0 auto;
}

/* Hexagon master is 24×24 with a 20×20 vector inset 2px. Button instances
   size that master to 20×20. Keep both boxes. */
.mkt-button__icon {
  box-sizing: border-box;
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.mkt-button__icon svg,
.mkt-button__icon img {
  display: block;
  width: 20px;
  height: 20px;
}

/* --- Size (Contained / Outline / Text) --- */

.mkt-button[data-size="medium"] {
  height: var(--button-height-md);
  padding-block: var(--button-padding-block-md);
  padding-inline: var(--button-padding-inline-md);
}

.mkt-button[data-size="extra-small"] {
  height: var(--button-height-xs);
  padding-block: var(--button-padding-block-xs);
  padding-inline: var(--button-padding-inline-xs);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  letter-spacing: var(--text-body-small-letter-spacing);
}

/* --- Variant + Style (resting / first Figma row) --- */

.mkt-button[data-variant="contained"][data-style="light"],
.mkt-button[data-variant="contained"]:not([data-style]) {
  background: var(--color-100);
  color: var(--color-900);
  box-shadow: none;
}

.mkt-button[data-variant="contained"][data-style="dark"] {
  background: var(--color-900);
  color: var(--color-standard-white);
  box-shadow: none;
}

.mkt-button[data-variant="outline"][data-style="light"],
.mkt-button[data-variant="outline"]:not([data-style]) {
  background: transparent;
  color: var(--color-100);
  /* Figma strokeAlign=OUTSIDE, weight 2. CSS border would sit inside the height. */
  box-shadow: 0 0 0 2px var(--color-100);
}

.mkt-button[data-variant="outline"][data-style="dark"] {
  background: transparent;
  color: var(--color-900);
  box-shadow: 0 0 0 2px var(--color-900);
}

.mkt-button[data-variant="text"][data-style="light"],
.mkt-button[data-variant="text"]:not([data-style]) {
  background: transparent;
  color: var(--color-100);
  box-shadow: none;
}

.mkt-button[data-variant="text"][data-style="dark"] {
  background: transparent;
  color: var(--color-900);
  box-shadow: none;
}

.mkt-button[data-variant="link"] {
  height: 24px;
  padding: 0;
  border-radius: var(--radius-8);
  background: transparent;
  box-shadow: none;
}

.mkt-button[data-variant="link"][data-size="medium"] {
  height: 24px;
  padding: 0;
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
}

.mkt-button[data-variant="link"][data-size="small"],
.mkt-button[data-variant="link"][data-size="extra-small"] {
  height: 20px;
  padding: 0;
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  letter-spacing: var(--text-body-small-letter-spacing);
  border-radius: var(--radius-8);
}

.mkt-button[data-variant="link"][data-style="light"],
.mkt-button[data-variant="link"]:not([data-style]) {
  color: var(--color-100);
}

.mkt-button[data-variant="link"][data-style="dark"] {
  color: var(--color-900);
}