/* =========================
   FLAGS
   =========================
   Флаги стран как SVG-картинки. Эмодзи-флаги (U+1F1E6..) не подходят:
   в Windows нет глифов для regional indicator pairs, вместо флага
   рисуются две буквы в рамках.

   Файл общий для сайта и админки, поэтому пути к картинкам относительные
   от самого CSS — так он одинаково работает и из /, и из /boss/.
   Ассеты: flag-icons (MIT), формат 4x3.
*/

.flag {
    display: inline-block;
    width: 24px;
    height: 18px;
    vertical-align: -3px;
    border-radius: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* Внутренняя обводка вместо border: не увеличивает габариты и спасает
       белую полосу флага РФ на белом фоне. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    cursor: help;
}

.flag--ru { background-image: url(../images/flags/ru.svg); }
.flag--by { background-image: url(../images/flags/by.svg); }
.flag--kz { background-image: url(../images/flags/kz.svg); }
.flag--uz { background-image: url(../images/flags/uz.svg); }
.flag--kg { background-image: url(../images/flags/kg.svg); }
.flag--tj { background-image: url(../images/flags/tj.svg); }

/* Фолбэк для стран вне справочника СНГ: GeoIP в чате возвращает любую
   страну мира, картинки на все 250 мы не держим — показываем ISO-код. */
.flag--iso {
    width: auto;
    min-width: 24px;
    padding: 0 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0.5px;
    color: #555;
    background: #eceff3;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Страна не задана. Прочерк вместо пустоты, чтобы строка таблицы
   не меняла высоту. */
.flag--empty {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    color: #9aa4b0;
    cursor: default;
}

/* Крупный вариант — для промо-блоков на сайте, где флаг несёт смысл,
   а не служит иконкой в таблице. */
.flag--lg {
    width: 32px;
    height: 24px;
    vertical-align: -5px;
    border-radius: 3px;
}

/* Компактный вариант — плотные списки админки (диалоги чата, реквизиты
   в композере), где строка идёт шрифтом 13px. */
.flag--sm {
    width: 18px;
    height: 13px;
    vertical-align: -2px;
    border-radius: 1px;
}

.flag--sm.flag--iso {
    width: auto;
    min-width: 18px;
    padding: 0 2px;
    font-size: 9px;
    line-height: 13px;
}
