/* СИУР · система пиктограмм
   Цвет НЕ зашит в иконки — пиктограмма красится currentColor, цвет задаёт
   интерфейс. Поэтому один и тот же файл работает и на светлом, и на тёмном,
   и в состояниях hover/active без отдельных файлов. */

.siur-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  flex: none;
}

/* Обёртка только для выравнивания по центру строки. Размер задаёт
   сам svg внутри, поэтому класс .siur-icon на обёртке не нужен: когда
   он там стоял, svg наследовал 1em от мелкого шрифта подписи и иконки
   в контактном листе выходили случайного размера — от 9 до 14 px. */
.ico { display: inline-flex; align-items: center; justify-content: center; }

.siur-icon--24 { width: 24px; height: 24px; }
.siur-icon--32 { width: 32px; height: 32px; }
.siur-icon--48 { width: 48px; height: 48px; }
.siur-icon--72 { width: 72px; height: 72px; }

/* Состояния задаются цветом, а не разными файлами (§3 ТЗ). */
.siur-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 64px;
  background: var(--surface);
  color: var(--text);
  padding: 12px 20px;
  font: 500 15px/1 'Golos Text', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.siur-icon-btn:hover  { border-color: var(--text-2); }
.siur-icon-btn:active,
.siur-icon-btn[aria-current='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.siur-icon-btn:disabled { opacity: .38; cursor: default; }