/* Виды кнопок: второстепенная, карточка, тонкая, опасная.

   Отдельно от button.css: там основа — размер, форма, главное
   действие; здесь — разновидности. Вместе выходило за две сотни
   строк, а правило проекта короче. */

/* ── Второстепенное действие ───────────────────────────────── */

.btn--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent-dim);
  transform: translateY(-1px);
}

.btn--ghost:active {
  background: var(--surface-2);
  transform: translateY(1px) scale(.995);
  transition-duration: .12s;
}

.btn--ghost .btn__icon,
.btn--ghost .icon {
  color: var(--accent-text);
  transition: color var(--fast) var(--ease);
}

.btn--ghost:hover .icon { color: var(--accent-text-hi); }

.btn--danger { color: var(--danger); }

/* ── Мелкое действие: по ширине содержимого ────────────────── */

.btn--slim {
  width: auto;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
}

/* ── Ряд кнопок в одну строку, поровну ─────────────────────── */

.btn-row {
  display: flex;
  gap: var(--sp-3);
}

.btn-row .btn {
  flex: 1;
  margin-top: 0;
}

/* Кнопка-карточка: иконка и текст в две строки, как на входе. */
.btn--card {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
  text-align: left;
  line-height: 1.25;
}

.btn--card .icon {
  flex: none;
  width: var(--fs-lg);
  height: var(--fs-lg);
}