/* Use SVG flags so Windows does not render flag emoji as letter pairs (GE, GB, RU, TR). */
.language > button > span:first-child,
.language-menu button > span:first-child {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #d8ddd8;
  border-radius: 2px;
  box-shadow: 0 1px 2px #00000012;
  display: inline-block;
  flex: 0 0 22px;
  font-size: 0;
  height: 15px;
  overflow: hidden;
  width: 22px;
}

@media (width <= 780px) {
  /* The search row sits below the language button on mobile. Open the menu
     beneath that row so its first (Georgian) option is not covered. */
  .language {
    z-index: 90;
  }

  .language-menu {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    top: calc(100% + 66px);
    z-index: 100;
  }
}

html[lang="ka"] .language > button > span:first-child,
.language[data-locale="ka"] > button > span:first-child,
.language-menu button:nth-child(1) > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='white'/%3E%3Cpath d='M13 0h4v20h-4zM0 8h30v4H0z' fill='%23d71920'/%3E%3Cg stroke='%23d71920' stroke-width='1.5'%3E%3Cpath d='M6 3v4M4 5h4M24 3v4M22 5h4M6 13v4M4 15h4M24 13v4M22 15h4'/%3E%3C/g%3E%3C/svg%3E");
}

html[lang="en"] .language > button > span:first-child,
.language[data-locale="en"] > button > span:first-child,
.language-menu button:nth-child(2) > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23012169'/%3E%3Cpath d='M0 0l30 20M30 0L0 20' stroke='white' stroke-width='5'/%3E%3Cpath d='M0 0l30 20M30 0L0 20' stroke='%23c8102e' stroke-width='2'/%3E%3Cpath d='M15 0v20M0 10h30' stroke='white' stroke-width='7'/%3E%3Cpath d='M15 0v20M0 10h30' stroke='%23c8102e' stroke-width='4'/%3E%3C/svg%3E");
}

html[lang="ru"] .language > button > span:first-child,
.language[data-locale="ru"] > button > span:first-child,
.language-menu button:nth-child(3) > span:first-child {
  background-image: linear-gradient(to bottom, #fff 0 33.333%, #1c57a7 33.333% 66.666%, #d52b1e 66.666% 100%);
}

html[lang="tr"] .language > button > span:first-child,
.language[data-locale="tr"] > button > span:first-child,
.language-menu button:nth-child(4) > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23e30a17'/%3E%3Ccircle cx='12' cy='10' r='5.5' fill='white'/%3E%3Ccircle cx='14' cy='10' r='4.4' fill='%23e30a17'/%3E%3Cpath d='M18.2 7.4l.8 1.7 1.9.2-1.4 1.3.4 1.9-1.7-.9-1.7.9.3-1.9-1.3-1.3 1.9-.2z' fill='white'/%3E%3C/svg%3E");
}