/* icons.css — подэтап «Иконки»: оформление инлайн-SVG набора (public/js/icons.js).
   Сами картинки — в JS (пути 24×24, stroke=currentColor); здесь только размеры,
   выравнивание и цвет через токены. Ни одного hex — только var(--…).

   Правила:
   1. Цвет иконки наследуется (stroke="currentColor"), поэтому :hover/:disabled
      и тёмная тема работают без отдельных правил;
   2. размер по умолчанию — --icon-size (16px), варианты .icon--sm/--lg;
   3. инлайн-иконка в тексте выравнивается по базовой линии (vertical-align). */

.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: currentColor;
  vertical-align: -0.125em;   /* центр иконки по строке текста */
  pointer-events: none;       /* клик всегда попадает в кнопку, а не в <path> */
}

.icon--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.icon--lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

/* Приглушённая иконка (закрытия, «×», служебные) */
.icon--muted {
  color: var(--text-3);
}

/* Иконка внутри кнопки: отступ справа даёт gap у .btn, цвет берётся от кнопки */
.btn .icon {
  color: currentColor;
}

/* Иконка, вставленная из разметки через data-icon (span-обёртка до замены и сам <svg>
   после неё): в кнопках выравниваем по центру строки. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Квадратная кнопка «только иконка» (⤢, ×, 🌙): 28×28 без текста */
.btn--icon {
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
}

/* Кнопка .btn--icon чуть крупнее внутри шапки таблицы/карточки */
.btn--icon .icon {
  width: var(--icon-size);
  height: var(--icon-size);
}