/**
 * Icon styles — для SVG, отрендеренных через window.Icons
 *
 * Принципы:
 *   - SVG имеет размер 1em × 1em → масштабируется через font-size родителя.
 *   - currentColor в SVG → цвет наследуется от color родителя.
 *
 * Поэтому существующие правила .format-icon { font-size: 2.5rem; color: gold; }
 * работают без изменений — SVG подстраивается.
 */

[data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

[data-icon] > svg {
    width: 1em;
    height: 1em;
    display: block;
    flex-shrink: 0;
}

/* Если иконка пока не захайдрейтилась — пустое место без скачков */
[data-icon]:not([data-icon-hydrated]) {
    min-width: 1em;
    min-height: 1em;
}

/* Компактные инлайновые иконки внутри кнопок/заголовков */
.btn-icon[data-icon],
.title-icon[data-icon] {
    display: inline-flex;
    vertical-align: -0.15em;
    margin-right: 0.3em;
}

/* ============ Цвета для конкретных контейнеров =============
   SVG использует currentColor → каждому контейнеру задаём color.
   Эти правила заменяют эмодзи (которые имели свой цвет)
   на SVG в цветах темы. */

.exit-corner-btn .exit-icon[data-icon] {
    color: var(--accent-gold);
    filter: none; /* убираем hue-rotate, который нужен был для эмодзи */
}

.exit-corner-btn:hover .exit-icon[data-icon] {
    color: #f0c968;
    filter: none;
}

.stage-empty-icon[data-icon] {
    color: var(--accent-gold);
}

.auth-required-modal-icon[data-icon] {
    color: var(--accent-gold);
}

.stage-control-icon[data-icon],
.mobile-stage-btn-icon[data-icon] {
    color: inherit; /* наследуем от цвета текста кнопки */
}

.viewers-icon[data-icon],
.mobile-viewers-icon[data-icon] {
    color: var(--accent-gold);
    opacity: 0.85;
}

.rec span[data-icon="record"] {
    color: #ff4444;
}