/* ==========================================================================
   E-deal 2025 Design System - Buttons
   Source: Figma "Design system | E-deal 2025" node 17:126
   Tokens: tokens-figma.css
   ========================================================================== */

/* ── Base button ────────────────────────────────────────────────────────── */

.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);                /* 12px */
  padding: var(--space-3) var(--space-4); /* 12px 16px */
  border: var(--border-width-sm) solid transparent;
  border-radius: var(--radius-md);    /* 8px */
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-size-p1);     /* 16px */
  line-height: var(--line-height-normal); /* 24px */
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

/* A button rendered as an anchor takes no underline: the bare anchor carries the link hover, and
   a button is not a text link. */
.ed-btn:hover,
.ed-btn:focus {
  text-decoration: none;
}

.ed-btn:focus-visible {
  outline: 2px solid var(--color-blue-700);
  outline-offset: 2px;
}

/* Suppress the browser's default focus ring when focus does NOT come from the
   keyboard - e.g. a dialog programmatically focusing a button on open (agenda
   "Modifier"), or a mouse click. Keyboard focus keeps the :focus-visible ring
   above, and RGAA users keep their forced outlines from rgaa.css. */
.ed-btn:focus:not(:focus-visible) {
  outline: none;
}

/* ── Sizes ──────────────────────────────────────────────────────────────── */

.ed-btn--lg {
  min-height: var(--btn-height-lg);   /* 44px */
}

.ed-btn--md {
  min-height: var(--btn-height-md);   /* 38px */
}

.ed-btn--sm {
  min-height: var(--btn-height-sm);   /* 36px */
  font-size: var(--text-size-p2);     /* 14px */
  line-height: var(--line-height-snug); /* 20px */
}

/* ── Primary ────────────────────────────────────────────────────────────── */

.ed-btn--primary {
  background-color: var(--color-primary);       /* pink-500 #E2136A */
  color: var(--color-white);
  box-shadow: var(--shadow-btn-primary);
}

.ed-btn--primary:hover {
  background-color: var(--color-primary-hover);  /* pink-600 #BF0D58 */
}

.ed-btn--primary:disabled,
.ed-btn--primary.is-disabled {
  background-color: var(--color-pink-200);
  color: var(--color-white);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Secondary (white / default border) ─────────────────────────────────── */

.ed-btn--secondary {
  background-color: var(--color-white);
  border-color: var(--color-border-secondary);   /* grey-300 #AFBDCC */
  color: var(--color-text);                      /* gray-900 #092642 */
  box-shadow: none;
}

.ed-btn--secondary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.ed-btn--secondary:disabled,
.ed-btn--secondary.is-disabled {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-200);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ── Secondary pink ─────────────────────────────────────────────────────── */

.ed-btn--secondary-pink {
  background-color: var(--color-white);
  border-color: var(--color-pink-500);           /* #E2136A */
  color: var(--color-pink-500);
  box-shadow: none;
}

.ed-btn--secondary-pink:hover {
  background-color: var(--color-pink-100);
}

.ed-btn--secondary-pink:disabled,
.ed-btn--secondary-pink.is-disabled {
  border-color: var(--color-pink-200);
  color: var(--color-pink-200);
  cursor: not-allowed;
}

/* ── Secondary soft (pink fill, "Annuler" / cancel) ─────────────────────── */

.ed-btn--secondary-soft {
  background-color: var(--color-pink-150);       /* #FFD9E9 */
  border-color: transparent;
  color: var(--color-pink-700);
  box-shadow: none;
}

.ed-btn--secondary-soft:hover {
  background-color: var(--color-pink-200);
}

/* ── Secondary grey ─────────────────────────────────────────────────────── */

.ed-btn--secondary-grey {
  background-color: var(--color-white);
  border-color: var(--color-border-secondary);   /* grey-300 */
  color: var(--color-text);
  box-shadow: none;
}

.ed-btn--secondary-grey:hover {
  background-color: var(--color-gray-50);
}

/* ── Tertiary ───────────────────────────────────────────────────────────── */

.ed-btn--tertiary {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.ed-btn--tertiary:hover {
  background-color: var(--color-gray-50);
}

.ed-btn--tertiary:disabled,
.ed-btn--tertiary.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ── Tertiary blue ──────────────────────────────────────────────────────── */

.ed-btn--tertiary-blue {
  background-color: transparent;
  color: var(--color-blue-700);                  /* #1C72BD */
  border-color: transparent;
}

.ed-btn--tertiary-blue:hover {
  background-color: var(--color-blue-100);
}

/* ── Icon inside button ─────────────────────────────────────────────────── */

.ed-btn__icon {
  font-family: var(--font-family-icon);
  font-size: var(--icon-size-md);    /* 16px */
  font-weight: 300;                  /* FA 6 Pro Light */
  line-height: var(--line-height-15);
}

/* Icon-only button (square) */
.ed-btn--icon-only {
  padding: var(--space-3);           /* 12px all sides */
  gap: 0;
}

/* ── Split button ───────────────────────────────────────────────────────── */

.ed-btn-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ed-btn-split .ed-btn {
  border-radius: 0;
}

.ed-btn-split .ed-btn:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.ed-btn-split .ed-btn-split__trigger {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border-left: var(--border-width-sm) solid rgba(255, 255, 255, 0.2);
  padding: var(--space-3) var(--space-2);
}

/* ── Dropdown button ────────────────────────────────────────────────────── */

.ed-btn--dropdown .ed-btn__chevron {
  font-family: var(--font-family-icon);
  font-size: var(--icon-size-sm);    /* 12px */
  margin-left: var(--space-1);
}

/* ── Text button ────────────────────────────────────────────────────────── */

.ed-btn--text {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.ed-btn--text:hover {
  text-decoration: underline;
}

.ed-btn--text-blue {
  color: var(--color-blue-700);
}