/*
 * GENERATED from src/components/Button/ButtonLabel.tsx by scripts/build-genome-components.mjs.
 * Do not edit. Fix the component in the repository and re-run
 * `npm run genome:components` — Genome mirrors the repo, it never authors.
 */

/* ── Base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-interactive-gap-sm);
  border: var(--ds-border-md) solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  outline: none;
}

.btn:focus-visible {
  outline: var(--ds-border-focus-ring) solid var(--ds-color-components-focus-ring-default);
  outline-offset: var(--ds-spacing-components-focus-ring-outline-offset);
}

/*
 * Sizes.
 *
 * Every value here used to be a literal — height: 56px, padding: 0 32px,
 * font-size: 16px. Each happened to match its token, so the component was
 * correct by coincidence and would have stopped being correct the moment the
 * scale moved in Figma, silently. Checked one by one before switching; no
 * dimension changes.
 *
 * Type is one named style applied with the `font` shorthand, not a size beside
 * a weight. That is also what fixes the font: this file asked for
 * `font-family: 'Inter'` at weight 500, the last survivor of a global Inter
 * override that used to sit in .storybook/preview-head.html. The override is
 * gone, so ButtonLabel was the only component still rendering outside the real type
 * stack.
 */
.btn--xs {
  height: var(--ds-spacing-interactive-height-xs);
  padding: 0 var(--ds-spacing-space-2xs);
  gap: var(--ds-spacing-interactive-gap-xs);
  font: var(--ds-typography-font-label-body-100-medium);
}
.btn--sm {
  height: var(--ds-spacing-interactive-height-sm);
  padding: 0 var(--ds-spacing-space-sm);
  font: var(--ds-typography-font-label-body-200-medium);
}
.btn--md {
  height: var(--ds-spacing-interactive-height-md);
  padding: 0 var(--ds-spacing-space-lg);
  gap: var(--ds-spacing-interactive-gap-md);
  font: var(--ds-typography-font-label-body-200-medium);
}
.btn--lg {
  height: var(--ds-spacing-interactive-height-lg);
  padding: 0 var(--ds-spacing-space-xl);
  gap: var(--ds-spacing-interactive-gap-lg);
  font: var(--ds-typography-font-label-body-300-medium);
}

/* ── Icon slot ── */
.btn__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn--xs .btn__icon { width: var(--ds-spacing-interactive-media-xs); height: var(--ds-spacing-interactive-media-xs); }
.btn--sm .btn__icon { width: var(--ds-spacing-interactive-media-sm); height: var(--ds-spacing-interactive-media-sm); }
.btn--md .btn__icon { width: var(--ds-spacing-interactive-media-md); height: var(--ds-spacing-interactive-media-md); }
.btn--lg .btn__icon { width: var(--ds-spacing-interactive-media-lg); height: var(--ds-spacing-interactive-media-lg); }

/* ── Corner radius — Primary ── */
.btn--primary.btn--xs { border-radius: var(--ds-radius-interactive-radius-2xs); }
.btn--primary.btn--sm { border-radius: var(--ds-radius-interactive-radius-sm); }
.btn--primary.btn--md { border-radius: var(--ds-radius-interactive-radius-md); }
.btn--primary.btn--lg { border-radius: var(--ds-radius-interactive-radius-lg); }

/* ── Corner radius — Secondary / Tertiary / Minimal ──

   Only xs differs from Primary, and only for Secondary and Tertiary. Read off
   the component nodes in "ButtonLabel / Label":

     xs / Primary    interactive/radius/2xs   6
     xs / Secondary  interactive/radius/xs    8
     xs / Tertiary   interactive/radius/xs    8
     xs / Minimal    interactive/radius/2xs   6   <- groups with Primary

   Minimal was previously grouped with Secondary and Tertiary here, which made
   it 8px. It is 6px in Figma.

   ⚠️ Figma disagrees with itself on this. The `Size Spec` section of
   `Document: ButtonLabel label` lists a single radius per size — xs is
   interactive/radius/2xs, with no emphasis qualifier — while the components
   bind radius/xs for Secondary and Tertiary. The components are followed here
   because they are what a designer places; the contradiction is reported to the
   designer rather than resolved in code. */
.btn--secondary.btn--xs, .btn--tertiary.btn--xs { border-radius: var(--ds-radius-interactive-radius-xs); }
.btn--minimal.btn--xs { border-radius: var(--ds-radius-interactive-radius-2xs); }
.btn--secondary.btn--sm, .btn--tertiary.btn--sm, .btn--minimal.btn--sm { border-radius: var(--ds-radius-interactive-radius-sm); }
.btn--secondary.btn--md, .btn--tertiary.btn--md, .btn--minimal.btn--md { border-radius: var(--ds-radius-interactive-radius-md); }
.btn--secondary.btn--lg, .btn--tertiary.btn--lg, .btn--minimal.btn--lg { border-radius: var(--ds-radius-interactive-radius-lg); }

/* ── Shape ── */
.btn.btn--round { border-radius: var(--ds-radius-full); }

/* ── Tertiary shared border (all appearances, all themes) ── */
.btn--tertiary {
  background: transparent;
  border: var(--ds-border-lg) solid var(--ds-color-br-neutral-tertiary-100);
}

/* ════════════════════════════════
   NEUTRAL
════════════════════════════════ */

.btn--primary.btn--neutral {
  background: var(--ds-color-bg-neutral-primary-100);
  color: var(--ds-color-fg-neutral-primary-invert-100);
}
.btn--primary.btn--neutral:hover,
.btn--primary.btn--neutral.btn--hover {
  background: var(--ds-color-bg-neutral-primary-200);
}
.btn--primary.btn--neutral:active,
.btn--primary.btn--neutral.btn--pressed {
  background: var(--ds-color-bg-neutral-primary-300);
}

.btn--secondary.btn--neutral {
  background: var(--ds-color-bg-neutral-tertiary-100);
  color: var(--ds-color-fg-neutral-primary-100);
}
.btn--secondary.btn--neutral:hover,
.btn--secondary.btn--neutral.btn--hover {
  background: var(--ds-color-bg-neutral-tertiary-200);
}
.btn--secondary.btn--neutral:active,
.btn--secondary.btn--neutral.btn--pressed {
  background: var(--ds-color-bg-neutral-tertiary-300);
}

.btn--tertiary.btn--neutral {
  color: var(--ds-color-fg-neutral-primary-100);
}
.btn--tertiary.btn--neutral:hover,
.btn--tertiary.btn--neutral.btn--hover {
  background: var(--ds-color-bg-neutral-tertiary-100);
}
.btn--tertiary.btn--neutral:active,
.btn--tertiary.btn--neutral.btn--pressed {
  background: var(--ds-color-bg-neutral-tertiary-200);
}

.btn--minimal.btn--neutral {
  background: transparent;
  color: var(--ds-color-fg-neutral-primary-100);
}
.btn--minimal.btn--neutral:hover,
.btn--minimal.btn--neutral.btn--hover {
  background: var(--ds-color-bg-neutral-tertiary-100);
}
.btn--minimal.btn--neutral:active,
.btn--minimal.btn--neutral.btn--pressed {
  background: var(--ds-color-bg-neutral-tertiary-200);
}

/* ════════════════════════════════
   DESTRUCTIVE
════════════════════════════════ */

.btn--primary.btn--destructive {
  background: var(--ds-color-bg-sentiment-negative-primary-100);
  color: var(--ds-color-fg-neutral-primary-invert-100);
}
.btn--primary.btn--destructive:hover,
.btn--primary.btn--destructive.btn--hover {
  background: var(--ds-color-bg-sentiment-negative-primary-200);
}
.btn--primary.btn--destructive:active,
.btn--primary.btn--destructive.btn--pressed {
  background: var(--ds-color-bg-sentiment-negative-primary-300);
}

.btn--secondary.btn--destructive {
  background: var(--ds-color-bg-sentiment-negative-secondary-100);
  color: var(--ds-color-fg-sentiment-negative-100);
}
.btn--secondary.btn--destructive:hover,
.btn--secondary.btn--destructive.btn--hover {
  background: var(--ds-color-bg-sentiment-negative-secondary-200);
}
.btn--secondary.btn--destructive:active,
.btn--secondary.btn--destructive.btn--pressed {
  background: var(--ds-color-bg-sentiment-negative-secondary-300);
}

.btn--tertiary.btn--destructive {
  background: var(--ds-color-bg-neutral-tertiary-invert-100);
  color: var(--ds-color-fg-sentiment-negative-100);
}
.btn--tertiary.btn--destructive:hover,
.btn--tertiary.btn--destructive.btn--hover {
  background: var(--ds-color-bg-sentiment-negative-secondary-100);
}
.btn--tertiary.btn--destructive:active,
.btn--tertiary.btn--destructive.btn--pressed {
  background: var(--ds-color-bg-sentiment-negative-secondary-300);
}

.btn--minimal.btn--destructive {
  background: transparent;
  color: var(--ds-color-fg-sentiment-negative-100);
}
.btn--minimal.btn--destructive:hover,
.btn--minimal.btn--destructive.btn--hover {
  background: var(--ds-color-bg-sentiment-negative-secondary-100);
}
.btn--minimal.btn--destructive:active,
.btn--minimal.btn--destructive.btn--pressed {
  background: var(--ds-color-bg-sentiment-negative-secondary-200);
}

/* ════════════════════════════════
   WARNING
════════════════════════════════ */

.btn--primary.btn--warning {
  background: var(--ds-color-bg-sentiment-warning-primary-100);
  color: var(--ds-color-fg-neutral-primary-invert-100);
}
.btn--primary.btn--warning:hover,
.btn--primary.btn--warning.btn--hover {
  background: var(--ds-color-bg-sentiment-warning-primary-200);
}
.btn--primary.btn--warning:active,
.btn--primary.btn--warning.btn--pressed {
  background: var(--ds-color-bg-sentiment-warning-primary-300);
}

.btn--secondary.btn--warning {
  background: var(--ds-color-bg-sentiment-warning-secondary-100);
  color: var(--ds-color-fg-sentiment-warning-200);
}
.btn--secondary.btn--warning:hover,
.btn--secondary.btn--warning.btn--hover {
  background: var(--ds-color-bg-sentiment-warning-secondary-200);
}
.btn--secondary.btn--warning:active,
.btn--secondary.btn--warning.btn--pressed {
  background: var(--ds-color-bg-sentiment-warning-secondary-300);
}

.btn--tertiary.btn--warning {
  color: var(--ds-color-fg-sentiment-warning-100);
}
.btn--tertiary.btn--warning:hover,
.btn--tertiary.btn--warning.btn--hover {
  background: var(--ds-color-bg-sentiment-warning-secondary-100);
}
.btn--tertiary.btn--warning:active,
.btn--tertiary.btn--warning.btn--pressed {
  background: var(--ds-color-bg-sentiment-warning-secondary-200);
}

.btn--minimal.btn--warning {
  background: transparent;
  color: var(--ds-color-fg-sentiment-warning-100);
}
.btn--minimal.btn--warning:hover,
.btn--minimal.btn--warning.btn--hover {
  background: var(--ds-color-bg-sentiment-warning-secondary-100);
}
.btn--minimal.btn--warning:active,
.btn--minimal.btn--warning.btn--pressed {
  background: var(--ds-color-bg-sentiment-warning-secondary-200);
}

/* ════════════════════════════════
   POSITIVE
════════════════════════════════ */

.btn--primary.btn--positive {
  background: var(--ds-color-bg-sentiment-positive-primary-100);
  color: var(--ds-color-fg-neutral-primary-invert-100);
}
.btn--primary.btn--positive:hover,
.btn--primary.btn--positive.btn--hover {
  background: var(--ds-color-bg-sentiment-positive-primary-200);
}
.btn--primary.btn--positive:active,
.btn--primary.btn--positive.btn--pressed {
  background: var(--ds-color-bg-sentiment-positive-primary-300);
}

.btn--secondary.btn--positive {
  background: var(--ds-color-bg-sentiment-positive-secondary-100);
  color: var(--ds-color-fg-sentiment-positive-100);
}
.btn--secondary.btn--positive:hover,
.btn--secondary.btn--positive.btn--hover {
  background: var(--ds-color-bg-sentiment-positive-secondary-200);
}
.btn--secondary.btn--positive:active,
.btn--secondary.btn--positive.btn--pressed {
  background: var(--ds-color-bg-sentiment-positive-secondary-300);
}

.btn--tertiary.btn--positive {
  color: var(--ds-color-fg-sentiment-positive-100);
}
.btn--tertiary.btn--positive:hover,
.btn--tertiary.btn--positive.btn--hover {
  background: var(--ds-color-bg-sentiment-positive-secondary-100);
}
.btn--tertiary.btn--positive:active,
.btn--tertiary.btn--positive.btn--pressed {
  background: var(--ds-color-bg-sentiment-positive-secondary-200);
}

.btn--minimal.btn--positive {
  background: transparent;
  color: var(--ds-color-fg-sentiment-positive-100);
}
.btn--minimal.btn--positive:hover,
.btn--minimal.btn--positive.btn--hover {
  background: var(--ds-color-bg-sentiment-positive-secondary-100);
}
.btn--minimal.btn--positive:active,
.btn--minimal.btn--positive.btn--pressed {
  background: var(--ds-color-bg-sentiment-positive-secondary-200);
}

/* ════════════════════════════════
   DISABLED & LOADING
════════════════════════════════ */

.btn:disabled,
.btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.75;
}

.btn__spinner {
  width: 1em;
  height: 1em;
  border: var(--ds-border-xl) solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  flex-shrink: 0;
}

.btn__label { flex-shrink: 0; }

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}