/** @component input-phone-number */

@include exports('md-input-phonenumber') {
  .#{$phonenumber-input__class} {
    display: inline-flex;
    flex-direction: column;
    padding: 0;

    &__active {
      box-shadow: 0 0 4px 2px $focus-color;
    }

    &__country-code {
      color: $md-gray-50;
      vertical-align: text-top;

      &-right {
        color: $md-gray-50;
        text-align: right;
      }
    }

    &__dropdown {
      &-arrow {
        position: relative;
        left: rem-calc(14);
        color: $md-gray-50;
      }

      &-container {
        width: 100%;
        margin: 0;
        overflow-x: hidden;

        .md-list-item:focus {
          background-color: $md-theme-10;
        }
      }

      &-none {
        cursor: pointer;
      }

      &-selected {
        background-color: $md-theme-10;
      }

      &-trigger {
        display: inline-flex;
        width: max-content;
        padding-top: rem-calc(4);
      }

      &.md-event-overlay,
      .md-event-overlay__children {
        position: absolute;
        width: 100%;
        max-height: 19.25rem;
      }

      .md-event-overlay__children {
        top: rem-calc(36);

        &.#{$phonenumber-input__class}__top {
          top: auto;
          bottom: 100%;
        }
      }
    }

    &__hidden-select {
      display: none;
    }

    &__wrapper {
      display: flex;
      width: 100%;
      padding: 0;
    }

    &__number {
      padding-top: rem-calc(3);
      padding-right: rem-calc(12);
      flex-grow: 1;

      input {
        width: 100%;

        &:focus {
          box-shadow: none;
        }
      }
    }

    &__dropdown-trigger,
    &__number input {
      padding-bottom: rem-calc(7);
      padding-left: rem-calc(12);
      background: transparent;
      border: none;
    }

    &__group.#{$input__class}-container {
      margin-bottom: 0;

      &.error {
        .#{$phonenumber-input__class}__number input {
          background: transparent;
          border: none;

          &:focus {
            box-shadow: none;
          }
        }
      }
    }
  }
}

.md-flag {
  display: inline-block;
  width: $flag-width;
  height: $flag-height;
  // empty state
  background-color: $md-gray-30;
  background-image: url('#{$flags-image-path}/#{$flags-image-name}.#{$flags-image-extension}');
  background-position: $flag-width 0;
  background-repeat: no-repeat;

  @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2 / 1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    background-image: url('#{$flags-image-path}/#{$flags-image-name}@2x.#{$flags-image-extension}');
  }
}

.md-flag {
  $item-width-maps: (
    ac: 20px,
    ad: 20px,
    ae: 20px,
    af: 20px,
    ag: 20px,
    ai: 20px,
    al: 20px,
    am: 20px,
    ao: 20px,
    aq: 20px,
    ar: 20px,
    as: 20px,
    at: 20px,
    au: 20px,
    aw: 20px,
    ax: 20px,
    az: 20px,
    ba: 20px,
    bb: 20px,
    bd: 20px,
    be: 18px,
    bf: 20px,
    bg: 20px,
    bh: 20px,
    bi: 20px,
    bj: 20px,
    bl: 20px,
    bm: 20px,
    bn: 20px,
    bo: 20px,
    bq: 20px,
    br: 20px,
    bs: 20px,
    bt: 20px,
    bv: 20px,
    bw: 20px,
    by: 20px,
    bz: 20px,
    ca: 20px,
    cc: 20px,
    cd: 20px,
    cf: 20px,
    cg: 20px,
    ch: 15px,
    ci: 20px,
    ck: 20px,
    cl: 20px,
    cm: 20px,
    cn: 20px,
    co: 20px,
    cp: 20px,
    cr: 20px,
    cu: 20px,
    cv: 20px,
    cw: 20px,
    cx: 20px,
    cy: 20px,
    cz: 20px,
    de: 20px,
    dg: 20px,
    dj: 20px,
    dk: 20px,
    dm: 20px,
    do: 20px,
    dz: 20px,
    ea: 20px,
    ec: 20px,
    ee: 20px,
    eg: 20px,
    eh: 20px,
    er: 20px,
    es: 20px,
    et: 20px,
    eu: 20px,
    fi: 20px,
    fj: 20px,
    fk: 20px,
    fm: 20px,
    fo: 20px,
    fr: 20px,
    ga: 20px,
    gb: 20px,
    gd: 20px,
    ge: 20px,
    gf: 20px,
    gg: 20px,
    gh: 20px,
    gi: 20px,
    gl: 20px,
    gm: 20px,
    gn: 20px,
    gp: 20px,
    gq: 20px,
    gr: 20px,
    gs: 20px,
    gt: 20px,
    gu: 20px,
    gw: 20px,
    gy: 20px,
    hk: 20px,
    hm: 20px,
    hn: 20px,
    hr: 20px,
    ht: 20px,
    hu: 20px,
    ic: 20px,
    id: 20px,
    ie: 20px,
    il: 20px,
    im: 20px,
    in: 20px,
    io: 20px,
    iq: 20px,
    ir: 20px,
    is: 20px,
    it: 20px,
    je: 20px,
    jm: 20px,
    jo: 20px,
    jp: 20px,
    ke: 20px,
    kg: 20px,
    kh: 20px,
    ki: 20px,
    km: 20px,
    kn: 20px,
    kp: 20px,
    kr: 20px,
    kw: 20px,
    ky: 20px,
    kz: 20px,
    la: 20px,
    lb: 20px,
    lc: 20px,
    li: 20px,
    lk: 20px,
    lr: 20px,
    ls: 20px,
    lt: 20px,
    lu: 20px,
    lv: 20px,
    ly: 20px,
    ma: 20px,
    mc: 19px,
    md: 20px,
    me: 20px,
    mf: 20px,
    mg: 20px,
    mh: 20px,
    mk: 20px,
    ml: 20px,
    mm: 20px,
    mn: 20px,
    mo: 20px,
    mp: 20px,
    mq: 20px,
    mr: 20px,
    ms: 20px,
    mt: 20px,
    mu: 20px,
    mv: 20px,
    mw: 20px,
    mx: 20px,
    my: 20px,
    mz: 20px,
    na: 20px,
    nc: 20px,
    ne: 18px,
    nf: 20px,
    ng: 20px,
    ni: 20px,
    nl: 20px,
    no: 20px,
    np: 13px,
    nr: 20px,
    nu: 20px,
    nz: 20px,
    om: 20px,
    pa: 20px,
    pe: 20px,
    pf: 20px,
    pg: 20px,
    ph: 20px,
    pk: 20px,
    pl: 20px,
    pm: 20px,
    pn: 20px,
    pr: 20px,
    ps: 20px,
    pt: 20px,
    pw: 20px,
    py: 20px,
    qa: 20px,
    re: 20px,
    ro: 20px,
    rs: 20px,
    ru: 20px,
    rw: 20px,
    sa: 20px,
    sb: 20px,
    sc: 20px,
    sd: 20px,
    se: 20px,
    sg: 20px,
    sh: 20px,
    si: 20px,
    sj: 20px,
    sk: 20px,
    sl: 20px,
    sm: 20px,
    sn: 20px,
    so: 20px,
    sr: 20px,
    ss: 20px,
    st: 20px,
    sv: 20px,
    sx: 20px,
    sy: 20px,
    sz: 20px,
    ta: 20px,
    tc: 20px,
    td: 20px,
    tf: 20px,
    tg: 20px,
    th: 20px,
    tj: 20px,
    tk: 20px,
    tl: 20px,
    tm: 20px,
    tn: 20px,
    to: 20px,
    tr: 20px,
    tt: 20px,
    tv: 20px,
    tw: 20px,
    tz: 20px,
    ua: 20px,
    ug: 20px,
    um: 20px,
    us: 20px,
    uy: 20px,
    uz: 20px,
    va: 15px,
    vc: 20px,
    ve: 20px,
    vg: 20px,
    vi: 20px,
    vn: 20px,
    vu: 20px,
    wf: 20px,
    ws: 20px,
    xk: 20px,
    ye: 20px,
    yt: 20px,
    za: 20px,
    zm: 20px,
    zw: 20px,
  );
  $standard-country: 'ac';

  width: map-get($item-width-maps, $standard-country);

  @each $key, $width in $item-width-maps {
    @if $width !=map-get($item-width-maps, $standard-country) {
      &.#{$key} {
        width: $width;
      }
    }
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    background-size: 5630px 15px;
    background-position-y: 0;
  }

  &.ac {
    height: 10px;
    margin-top: 8px;
    background-position-x: 0px;
  }

  &.ad {
    height: 14px;
    margin-top: 6px;
    background-position-x: -22px;
  }

  &.ae {
    height: 10px;
    margin-top: 8px;
    background-position-x: -44px;
  }

  &.af {
    height: 14px;
    margin-top: 6px;
    background-position-x: -66px;
  }

  &.ag {
    height: 14px;
    margin-top: 6px;
    background-position-x: -88px;
  }

  &.ai {
    height: 10px;
    margin-top: 8px;
    background-position-x: -110px;
  }

  &.al {
    height: 15px;
    margin-top: 6px;
    background-position-x: -132px;
  }

  &.am {
    height: 10px;
    margin-top: 8px;
    background-position-x: -154px;
  }

  &.ao {
    height: 14px;
    margin-top: 6px;
    background-position-x: -176px;
  }

  &.aq {
    height: 14px;
    margin-top: 6px;
    background-position-x: -198px;
  }

  &.ar {
    height: 13px;
    margin-top: 6px;
    background-position-x: -220px;
  }

  &.as {
    height: 10px;
    margin-top: 8px;
    background-position-x: -242px;
  }

  &.at {
    height: 14px;
    margin-top: 6px;
    background-position-x: -264px;
  }

  &.au {
    height: 10px;
    margin-top: 8px;
    background-position-x: -286px;
  }

  &.aw {
    height: 14px;
    margin-top: 6px;
    background-position-x: -308px;
  }

  &.ax {
    height: 13px;
    margin-top: 6px;
    background-position-x: -330px;
  }

  &.az {
    height: 10px;
    margin-top: 8px;
    background-position-x: -352px;
  }

  &.ba {
    height: 10px;
    margin-top: 8px;
    background-position-x: -374px;
  }

  &.bb {
    height: 14px;
    margin-top: 6px;
    background-position-x: -396px;
  }

  &.bd {
    height: 12px;
    margin-top: 7px;
    background-position-x: -418px;
  }

  &.be {
    height: 15px;
    margin-top: 6px;
    background-position-x: -440px;
  }

  &.bf {
    height: 14px;
    margin-top: 6px;
    background-position-x: -460px;
  }

  &.bg {
    height: 12px;
    margin-top: 7px;
    background-position-x: -482px;
  }

  &.bh {
    height: 12px;
    margin-top: 7px;
    background-position-x: -504px;
  }

  &.bi {
    height: 12px;
    margin-top: 7px;
    background-position-x: -526px;
  }

  &.bj {
    height: 14px;
    margin-top: 6px;
    background-position-x: -548px;
  }

  &.bl {
    height: 14px;
    margin-top: 6px;
    background-position-x: -570px;
  }

  &.bm {
    height: 10px;
    margin-top: 8px;
    background-position-x: -592px;
  }

  &.bn {
    height: 10px;
    margin-top: 8px;
    background-position-x: -614px;
  }

  &.bo {
    height: 14px;
    margin-top: 6px;
    background-position-x: -636px;
  }

  &.bq {
    height: 14px;
    margin-top: 6px;
    background-position-x: -658px;
  }

  &.br {
    height: 14px;
    margin-top: 6px;
    background-position-x: -680px;
  }

  &.bs {
    height: 10px;
    margin-top: 8px;
    background-position-x: -702px;
  }

  &.bt {
    height: 14px;
    margin-top: 6px;
    background-position-x: -724px;
  }

  &.bv {
    height: 15px;
    margin-top: 6px;
    background-position-x: -746px;
  }

  &.bw {
    height: 14px;
    margin-top: 6px;
    background-position-x: -768px;
  }

  &.by {
    height: 10px;
    margin-top: 8px;
    background-position-x: -790px;
  }

  &.bz {
    height: 14px;
    margin-top: 6px;
    background-position-x: -812px;
  }

  &.ca {
    height: 10px;
    margin-top: 8px;
    background-position-x: -834px;
  }

  &.cc {
    height: 10px;
    margin-top: 8px;
    background-position-x: -856px;
  }

  &.cd {
    height: 15px;
    margin-top: 6px;
    background-position-x: -878px;
  }

  &.cf {
    height: 14px;
    margin-top: 6px;
    background-position-x: -900px;
  }

  &.cg {
    height: 14px;
    margin-top: 6px;
    background-position-x: -922px;
  }

  &.ch {
    height: 15px;
    margin-top: 6px;
    background-position-x: -944px;
  }

  &.ci {
    height: 14px;
    margin-top: 6px;
    background-position-x: -961px;
  }

  &.ck {
    height: 10px;
    margin-top: 8px;
    background-position-x: -983px;
  }

  &.cl {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1005px;
  }

  &.cm {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1027px;
  }

  &.cn {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1049px;
  }

  &.co {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1071px;
  }

  &.cp {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1093px;
  }

  &.cr {
    height: 12px;
    margin-top: 7px;
    background-position-x: -1115px;
  }

  &.cu {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1137px;
  }

  &.cv {
    height: 12px;
    margin-top: 7px;
    background-position-x: -1159px;
  }

  &.cw {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1181px;
  }

  &.cx {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1203px;
  }

  &.cy {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1225px;
  }

  &.cz {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1247px;
  }

  &.de {
    height: 12px;
    margin-top: 7px;
    background-position-x: -1269px;
  }

  &.dg {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1291px;
  }

  &.dj {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1313px;
  }

  &.dk {
    height: 15px;
    margin-top: 6px;
    background-position-x: -1335px;
  }

  &.dm {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1357px;
  }

  &.do {
    height: 13px;
    margin-top: 7px;
    background-position-x: -1379px;
  }

  &.dz {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1401px;
  }

  &.ea {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1423px;
  }

  &.ec {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1445px;
  }

  &.ee {
    height: 13px;
    margin-top: 7px;
    background-position-x: -1467px;
  }

  &.eg {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1489px;
  }

  &.eh {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1511px;
  }

  &.er {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1533px;
  }

  &.es {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1555px;
  }

  &.et {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1577px;
  }

  &.eu {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1599px;
  }

  &.fi {
    height: 12px;
    margin-top: 7px;
    background-position-x: -1621px;
  }

  &.fj {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1643px;
  }

  &.fk {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1665px;
  }

  &.fm {
    height: 11px;
    margin-top: 8px;
    background-position-x: -1687px;
  }

  &.fo {
    height: 15px;
    margin-top: 6px;
    background-position-x: -1709px;
  }

  &.fr {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1731px;
  }

  &.ga {
    height: 15px;
    margin-top: 6px;
    background-position-x: -1753px;
  }

  &.gb {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1775px;
  }

  &.gd {
    height: 12px;
    margin-top: 7px;
    background-position-x: -1797px;
  }

  &.ge {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1819px;
  }

  &.gf {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1841px;
  }

  &.gg {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1863px;
  }

  &.gh {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1885px;
  }

  &.gi {
    height: 10px;
    margin-top: 8px;
    background-position-x: -1907px;
  }

  &.gl {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1929px;
  }

  &.gm {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1951px;
  }

  &.gn {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1973px;
  }

  &.gp {
    height: 14px;
    margin-top: 6px;
    background-position-x: -1995px;
  }

  &.gq {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2017px;
  }

  &.gr {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2039px;
  }

  &.gs {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2061px;
  }

  &.gt {
    height: 13px;
    margin-top: 7px;
    background-position-x: -2083px;
  }

  &.gu {
    height: 11px;
    margin-top: 8px;
    background-position-x: -2105px;
  }

  &.gw {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2127px;
  }

  &.gy {
    height: 12px;
    margin-top: 7px;
    background-position-x: -2149px;
  }

  &.hk {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2171px;
  }

  &.hm {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2193px;
  }

  &.hn {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2215px;
  }

  &.hr {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2237px;
  }

  &.ht {
    height: 12px;
    margin-top: 7px;
    background-position-x: -2259px;
  }

  &.hu {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2281px;
  }

  &.ic {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2303px;
  }

  &.id {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2325px;
  }

  &.ie {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2347px;
  }

  &.il {
    height: 15px;
    margin-top: 6px;
    background-position-x: -2369px;
  }

  &.im {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2391px;
  }

  &.in {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2413px;
  }

  &.io {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2435px;
  }

  &.iq {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2457px;
  }

  &.ir {
    height: 12px;
    margin-top: 7px;
    background-position-x: -2479px;
  }

  &.is {
    height: 15px;
    margin-top: 6px;
    background-position-x: -2501px;
  }

  &.it {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2523px;
  }

  &.je {
    height: 12px;
    margin-top: 7px;
    background-position-x: -2545px;
  }

  &.jm {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2567px;
  }

  &.jo {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2589px;
  }

  &.jp {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2611px;
  }

  &.ke {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2633px;
  }

  &.kg {
    height: 12px;
    margin-top: 7px;
    background-position-x: -2655px;
  }

  &.kh {
    height: 13px;
    margin-top: 7px;
    background-position-x: -2677px;
  }

  &.ki {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2699px;
  }

  &.km {
    height: 12px;
    margin-top: 7px;
    background-position-x: -2721px;
  }

  &.kn {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2743px;
  }

  &.kp {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2765px;
  }

  &.kr {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2787px;
  }

  &.kw {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2809px;
  }

  &.ky {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2831px;
  }

  &.kz {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2853px;
  }

  &.la {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2875px;
  }

  &.lb {
    height: 14px;
    margin-top: 6px;
    background-position-x: -2897px;
  }

  &.lc {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2919px;
  }

  &.li {
    height: 12px;
    margin-top: 7px;
    background-position-x: -2941px;
  }

  &.lk {
    height: 10px;
    margin-top: 8px;
    background-position-x: -2963px;
  }

  &.lr {
    height: 11px;
    margin-top: 8px;
    background-position-x: -2985px;
  }

  &.ls {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3007px;
  }

  &.lt {
    height: 12px;
    margin-top: 7px;
    background-position-x: -3029px;
  }

  &.lu {
    height: 12px;
    margin-top: 7px;
    background-position-x: -3051px;
  }

  &.lv {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3073px;
  }

  &.ly {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3095px;
  }

  &.ma {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3117px;
  }

  &.mc {
    height: 15px;
    margin-top: 6px;
    background-position-x: -3139px;
  }

  &.md {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3160px;
  }

  &.me {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3182px;
  }

  &.mf {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3204px;
  }

  &.mg {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3226px;
  }

  &.mh {
    height: 11px;
    margin-top: 8px;
    background-position-x: -3248px;
  }

  &.mk {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3270px;
  }

  &.ml {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3292px;
  }

  &.mm {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3314px;
  }

  &.mn {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3336px;
  }

  &.mo {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3358px;
  }

  &.mp {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3380px;
  }

  &.mq {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3402px;
  }

  &.mr {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3424px;
  }

  &.ms {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3446px;
  }

  &.mt {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3468px;
  }

  &.mu {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3490px;
  }

  &.mv {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3512px;
  }

  &.mw {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3534px;
  }

  &.mx {
    height: 12px;
    margin-top: 7px;
    background-position-x: -3556px;
  }

  &.my {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3578px;
  }

  &.mz {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3600px;
  }

  &.na {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3622px;
  }

  &.nc {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3644px;
  }

  &.ne {
    height: 15px;
    margin-top: 6px;
    background-position-x: -3666px;
  }

  &.nf {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3686px;
  }

  &.ng {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3708px;
  }

  &.ni {
    height: 12px;
    margin-top: 7px;
    background-position-x: -3730px;
  }

  &.nl {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3752px;
  }

  &.no {
    height: 15px;
    margin-top: 6px;
    background-position-x: -3774px;
  }

  &.np {
    height: 15px;
    margin-top: 6px;
    background-position-x: -3796px;
  }

  &.nr {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3811px;
  }

  &.nu {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3833px;
  }

  &.nz {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3855px;
  }

  &.om {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3877px;
  }

  &.pa {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3899px;
  }

  &.pe {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3921px;
  }

  &.pf {
    height: 14px;
    margin-top: 6px;
    background-position-x: -3943px;
  }

  &.pg {
    height: 15px;
    margin-top: 6px;
    background-position-x: -3965px;
  }

  &.ph {
    height: 10px;
    margin-top: 8px;
    background-position-x: -3987px;
  }

  &.pk {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4009px;
  }

  &.pl {
    height: 13px;
    margin-top: 7px;
    background-position-x: -4031px;
  }

  &.pm {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4053px;
  }

  &.pn {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4075px;
  }

  &.pr {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4097px;
  }

  &.ps {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4119px;
  }

  &.pt {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4141px;
  }

  &.pw {
    height: 13px;
    margin-top: 7px;
    background-position-x: -4163px;
  }

  &.py {
    height: 11px;
    margin-top: 8px;
    background-position-x: -4185px;
  }

  &.qa {
    height: 8px;
    margin-top: 9px;
    background-position-x: -4207px;
  }

  &.re {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4229px;
  }

  &.ro {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4251px;
  }

  &.rs {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4273px;
  }

  &.ru {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4295px;
  }

  &.rw {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4317px;
  }

  &.sa {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4339px;
  }

  &.sb {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4361px;
  }

  &.sc {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4383px;
  }

  &.sd {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4405px;
  }

  &.se {
    height: 13px;
    margin-top: 7px;
    background-position-x: -4427px;
  }

  &.sg {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4449px;
  }

  &.sh {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4471px;
  }

  &.si {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4493px;
  }

  &.sj {
    height: 15px;
    margin-top: 6px;
    background-position-x: -4515px;
  }

  &.sk {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4537px;
  }

  &.sl {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4559px;
  }

  &.sm {
    height: 15px;
    margin-top: 6px;
    background-position-x: -4581px;
  }

  &.sn {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4603px;
  }

  &.so {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4625px;
  }

  &.sr {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4647px;
  }

  &.ss {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4669px;
  }

  &.st {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4691px;
  }

  &.sv {
    height: 12px;
    margin-top: 7px;
    background-position-x: -4713px;
  }

  &.sx {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4735px;
  }

  &.sy {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4757px;
  }

  &.sz {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4779px;
  }

  &.ta {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4801px;
  }

  &.tc {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4823px;
  }

  &.td {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4845px;
  }

  &.tf {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4867px;
  }

  &.tg {
    height: 13px;
    margin-top: 7px;
    background-position-x: -4889px;
  }

  &.th {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4911px;
  }

  &.tj {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4933px;
  }

  &.tk {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4955px;
  }

  &.tl {
    height: 10px;
    margin-top: 8px;
    background-position-x: -4977px;
  }

  &.tm {
    height: 14px;
    margin-top: 6px;
    background-position-x: -4999px;
  }

  &.tn {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5021px;
  }

  &.to {
    height: 10px;
    margin-top: 8px;
    background-position-x: -5043px;
  }

  &.tr {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5065px;
  }

  &.tt {
    height: 12px;
    margin-top: 7px;
    background-position-x: -5087px;
  }

  &.tv {
    height: 10px;
    margin-top: 8px;
    background-position-x: -5109px;
  }

  &.tw {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5131px;
  }

  &.tz {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5153px;
  }

  &.ua {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5175px;
  }

  &.ug {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5197px;
  }

  &.um {
    height: 11px;
    margin-top: 8px;
    background-position-x: -5219px;
  }

  &.us {
    height: 11px;
    margin-top: 8px;
    background-position-x: -5241px;
  }

  &.uy {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5263px;
  }

  &.uz {
    height: 10px;
    margin-top: 8px;
    background-position-x: -5285px;
  }

  &.va {
    height: 15px;
    margin-top: 6px;
    background-position-x: -5307px;
  }

  &.vc {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5324px;
  }

  &.ve {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5346px;
  }

  &.vg {
    height: 10px;
    margin-top: 8px;
    background-position-x: -5368px;
  }

  &.vi {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5390px;
  }

  &.vn {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5412px;
  }

  &.vu {
    height: 12px;
    margin-top: 7px;
    background-position-x: -5434px;
  }

  &.wf {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5456px;
  }

  &.ws {
    height: 10px;
    margin-top: 8px;
    background-position-x: -5478px;
  }

  &.xk {
    height: 15px;
    margin-top: 6px;
    background-position-x: -5500px;
  }

  &.ye {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5522px;
  }

  &.yt {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5544px;
  }

  &.za {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5566px;
  }

  &.zm {
    height: 14px;
    margin-top: 6px;
    background-position-x: -5588px;
  }

  &.zw {
    height: 10px;
    margin-top: 8px;
    background-position-x: -5610px;
  }
}