/*
 * Local flag sprite — CSS variable scaling
 * Sprite: /images/flags/flags-32.png (512×512, 16×16 grid, 32×32px/cell)
 * Flag content per cell: 30×20px at offset (1, 6)  →  3:2 aspect ratio
 *
 * --fi-scale controls display size:
 *   0.7  → 21×14px  (default inline flag)
 *   1.0  → 30×20px  (lang-card-flag)
 *   0.6  → 18×12px  (lang-toggle-flag)
 *
 * Usage: <span class="fi fi-vn"></span>
 */

.fi {
  --fi-scale: 0.7;
  display: inline-block;
  width:  calc(30px * var(--fi-scale));
  height: calc(20px * var(--fi-scale));
  background-image: url('/images/flags/flags-32.png');
  background-repeat: no-repeat;
  background-size: calc(512px * var(--fi-scale)) calc(512px * var(--fi-scale));
  background-position:
    calc(var(--fi-x, 0) * 1px * var(--fi-scale))
    calc(var(--fi-y, 0) * 1px * var(--fi-scale));
  vertical-align: middle;
  flex-shrink: 0;
}

.fi-af { --fi-x: -97;  --fi-y: -6; }
.fi-ar { --fi-x: -321; --fi-y: -6; }
.fi-at { --fi-x: -385; --fi-y: -6; }
.fi-au { --fi-x: -417; --fi-y: -6; }
.fi-az { --fi-x: -1;   --fi-y: -38; }
.fi-bd { --fi-x: -97;  --fi-y: -38; }
.fi-be { --fi-x: -129; --fi-y: -38; }
.fi-bg { --fi-x: -193; --fi-y: -38; }
.fi-bn { --fi-x: -385; --fi-y: -38; }
.fi-bo { --fi-x: -417; --fi-y: -38; }
.fi-br { --fi-x: -449; --fi-y: -38; }
.fi-ca { --fi-x: -129; --fi-y: -70; }
.fi-ch { --fi-x: -289; --fi-y: -70; }
.fi-cl { --fi-x: -385; --fi-y: -70; }
.fi-cm { --fi-x: -417; --fi-y: -70; }
.fi-cn { --fi-x: -449; --fi-y: -70; }
.fi-co { --fi-x: -481; --fi-y: -70; }
.fi-cy { --fi-x: -161; --fi-y: -102; }
.fi-cz { --fi-x: -193; --fi-y: -102; }
.fi-de { --fi-x: -225; --fi-y: -102; }
.fi-dk { --fi-x: -289; --fi-y: -102; }
.fi-do { --fi-x: -353; --fi-y: -102; }
.fi-ec { --fi-x: -449; --fi-y: -102; }
.fi-eg { --fi-x: -1;   --fi-y: -134; }
.fi-es { --fi-x: -97;  --fi-y: -134; }
.fi-fi { --fi-x: -161; --fi-y: -134; }
.fi-fr { --fi-x: -321; --fi-y: -134; }
.fi-gb { --fi-x: -385; --fi-y: -134; }
.fi-ge { --fi-x: -449; --fi-y: -134; }
.fi-gr { --fi-x: -257; --fi-y: -166; }
.fi-gt { --fi-x: -289; --fi-y: -166; }
.fi-hk { --fi-x: -385; --fi-y: -166; }
.fi-hu { --fi-x: -1;   --fi-y: -198; }
.fi-id { --fi-x: -65;  --fi-y: -198; }
.fi-ie { --fi-x: -97;  --fi-y: -198; }
.fi-il { --fi-x: -129; --fi-y: -198; }
.fi-in { --fi-x: -193; --fi-y: -198; }
.fi-iq { --fi-x: -225; --fi-y: -198; }
.fi-is { --fi-x: -289; --fi-y: -198; }
.fi-it { --fi-x: -321; --fi-y: -198; }
.fi-jo { --fi-x: -417; --fi-y: -198; }
.fi-jp { --fi-x: -449; --fi-y: -198; }
.fi-ke { --fi-x: -481; --fi-y: -198; }
.fi-kh { --fi-x: -33;  --fi-y: -230; }
.fi-kr { --fi-x: -193; --fi-y: -230; }
.fi-la { --fi-x: -321; --fi-y: -230; }
.fi-lb { --fi-x: -353; --fi-y: -230; }
.fi-lk { --fi-x: -449; --fi-y: -230; }
.fi-lv { --fi-x: -97;  --fi-y: -262; }
.fi-ma { --fi-x: -161; --fi-y: -262; }
.fi-md { --fi-x: -225; --fi-y: -262; }
.fi-mk { --fi-x: -353; --fi-y: -262; }
.fi-mm { --fi-x: -417; --fi-y: -262; }
.fi-mt { --fi-x: -161; --fi-y: -294; }
.fi-mx { --fi-x: -257; --fi-y: -294; }
.fi-my { --fi-x: -289; --fi-y: -294; }
.fi-ng { --fi-x: -1;   --fi-y: -326; }
.fi-nl { --fi-x: -65;  --fi-y: -326; }
.fi-no { --fi-x: -97;  --fi-y: -326; }
.fi-nz { --fi-x: -225; --fi-y: -326; }
.fi-pe { --fi-x: -321; --fi-y: -326; }
.fi-ph { --fi-x: -417; --fi-y: -326; }
.fi-pk { --fi-x: -449; --fi-y: -326; }
.fi-pl { --fi-x: -481; --fi-y: -326; }
.fi-pt { --fi-x: -97;  --fi-y: -358; }
.fi-qa { --fi-x: -193; --fi-y: -358; }
.fi-ro { --fi-x: -225; --fi-y: -358; }
.fi-rs { --fi-x: -257; --fi-y: -358; }
.fi-ru { --fi-x: -289; --fi-y: -358; }
.fi-sa { --fi-x: -353; --fi-y: -358; }
.fi-se { --fi-x: -481; --fi-y: -358; }
.fi-sg { --fi-x: -1;   --fi-y: -390; }
.fi-sk { --fi-x: -97;  --fi-y: -390; }
.fi-sn { --fi-x: -193; --fi-y: -390; }
.fi-sr { --fi-x: -257; --fi-y: -390; }
.fi-th { --fi-x: -65;  --fi-y: -422; }
.fi-tn { --fi-x: -289; --fi-y: -422; }
.fi-tr { --fi-x: -321; --fi-y: -422; }
.fi-tw { --fi-x: -385; --fi-y: -422; }
.fi-tz { --fi-x: -417; --fi-y: -422; }
.fi-ua { --fi-x: -449; --fi-y: -422; }
.fi-us { --fi-x: -1;   --fi-y: -454; }
.fi-ve { --fi-x: -161; --fi-y: -454; }
.fi-vn { --fi-x: -257; --fi-y: -454; }
.fi-za { --fi-x: -1;   --fi-y: -486; }