/**
 * Иконки. Размер задаётся одной переменной, поэтому класс-модификатор и явный
 * size из icon() не спорят друг с другом: инлайновое значение просто сильнее.
 * Цвет не назначается вовсе — currentColor берётся у родителя, и иконка живёт
 * внутри строки текста, а не рядом с ней.
 */

.icon {
  --icon-size: 20px;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  vertical-align: -0.18em;
  pointer-events: none;
}

.icon--sm {
  --icon-size: 16px;
}

.icon--lg {
  --icon-size: 24px;
}

.icon--xl {
  --icon-size: 32px;
}

/* внутри flex- и центрирующих коробок базовая линия не нужна */
.btn > .icon,
.chip > .icon,
.badge > .icon,
.icon-btn > .icon,
.avatar > .icon,
.list__item > .icon,
.list__chevron,
.tabbar__icon,
.empty__icon > .icon,
.media-tile__fallback > .icon {
  vertical-align: middle;
}