/* =========================================================================
   EXCHANGER_ICON.CSS — Иконка обменника + CSS-заглушка (цветной круг)
   ========================================================================= */

/* Размеры иконок */
.exchanger-icon-sm,
.exchanger-icon-fallback.exchanger-icon-sm {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.exchanger-icon-md,
.exchanger-icon-fallback.exchanger-icon-md {
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.exchanger-icon-lg,
.exchanger-icon-fallback.exchanger-icon-lg {
    width: 64px;
    height: 64px;
    min-width: 64px;
}

/* Иконка-изображение */
img.exchanger-icon {
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* Заглушка — цветной круг (показывается, если иконка не загрузилась) */
.exchanger-icon-fallback {
    display: inline-flex;
    border-radius: 50%;
    vertical-align: middle;
}

/* Строка с иконкой + именем обменника (в таблицах) */
.exchanger-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 8 цветов для заглушек — контрастные на тёмном фоне */
.exchanger-icon-fallback[data-color="0"] { background: #3b82f6; }
.exchanger-icon-fallback[data-color="1"] { background: #10b981; }
.exchanger-icon-fallback[data-color="2"] { background: #f59e0b; }
.exchanger-icon-fallback[data-color="3"] { background: #ef4444; }
.exchanger-icon-fallback[data-color="4"] { background: #8b5cf6; }
.exchanger-icon-fallback[data-color="5"] { background: #ec4899; }
.exchanger-icon-fallback[data-color="6"] { background: #06b6d4; }
.exchanger-icon-fallback[data-color="7"] { background: #f97316; }