/*
 * design-system/components/button.css
 * Editorial Calm — Button. ТЗ раздел 4.1.
 *
 * Варианты:  primary, secondary, ghost, danger
 * Размеры:   sm (32px), md (40px по умолчанию), lg (48px)
 * Состояния: default, hover, active, focus, disabled, loading
 *
 * Использование:
 *   <button class="ed-btn ed-btn--primary">Открыть город</button>
 *   <button class="ed-btn ed-btn--secondary ed-btn--lg">Подробнее</button>
 *   <button class="ed-btn ed-btn--ghost ed-btn--sm">Отменить</button>
 *   <button class="ed-btn ed-btn--danger" disabled>Удалить</button>
 *   <button class="ed-btn ed-btn--primary" data-loading>Запускаю…</button>
 *
 * ЗАПРЕЩЕНО: эмодзи в кнопках. Только Lucide-иконки 16/20/24px,
 * stroke-width: 1.5 (см. ТЗ приложение A).
 */

[data-theme="editorial"] .ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding-inline: var(--s-4);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease);
}

/* Размеры */
[data-theme="editorial"] .ed-btn--sm { height: 32px; padding-inline: var(--s-3); font-size: 13px; }
[data-theme="editorial"] .ed-btn--md { height: 40px; padding-inline: var(--s-4); font-size: 14px; }
[data-theme="editorial"] .ed-btn--lg { height: 48px; padding-inline: var(--s-5); font-size: 15px; }

/* Иконки внутри (Lucide, никаких эмодзи) */
[data-theme="editorial"] .ed-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  flex-shrink: 0;
}
[data-theme="editorial"] .ed-btn--lg svg { width: 20px; height: 20px; }

/* ─── PRIMARY ──────────────────────────────────────────────────────── */
[data-theme="editorial"] .ed-btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
[data-theme="editorial"] .ed-btn--primary:hover:not(:disabled) {
  background: #000;        /* затемнение на ~4% */
  border-color: #000;
}
[data-theme="editorial"] .ed-btn--primary:active:not(:disabled) {
  background: #000;
  transform: translateY(0.5px);
}

/* ─── SECONDARY ────────────────────────────────────────────────────── */
[data-theme="editorial"] .ed-btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
[data-theme="editorial"] .ed-btn--secondary:hover:not(:disabled) {
  background: var(--paper-2);
}
[data-theme="editorial"] .ed-btn--secondary:active:not(:disabled) {
  background: var(--paper-3);
}

/* ─── GHOST ────────────────────────────────────────────────────────── */
[data-theme="editorial"] .ed-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
[data-theme="editorial"] .ed-btn--ghost:hover:not(:disabled) {
  background: var(--paper-2);
}

/* ─── DANGER ───────────────────────────────────────────────────────── */
[data-theme="editorial"] .ed-btn--danger {
  background: var(--bad);
  color: #FFFFFF;
  border-color: var(--bad);
}
[data-theme="editorial"] .ed-btn--danger:hover:not(:disabled) {
  background: #6E1F17;     /* ~4% темнее */
  border-color: #6E1F17;
}

/* ─── ОБЩИЕ СОСТОЯНИЯ ──────────────────────────────────────────────── */
[data-theme="editorial"] .ed-btn:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}
[data-theme="editorial"] .ed-btn:disabled,
[data-theme="editorial"] .ed-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;     /* ТЗ: именно прозрачность, не серый текст */
}

/* Loading: спиннер слева, текст остаётся.
   Применяется через атрибут [data-loading] для совместимости с
   реактивным state (без перерисовки HTML). */
[data-theme="editorial"] .ed-btn[data-loading]::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ed-btn-spin 700ms linear infinite;
}
[data-theme="editorial"] .ed-btn[data-loading] { pointer-events: none; }

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