/* HabboTravel: the language flag in the menu bar (js/ht-site.js) */

/* the page stays hidden until it is translated (at most 1.5 s: header.php) */
html.ht-i18n-wait body { opacity: 0; }

.ht-prefs { display: flex; align-items: center; gap: 6px; margin-right: 25px; position: relative; top: -4px; }   /* top: level with the avatar (the bar's items are all lifted a few px by style.css) */
.ht-prefs button { font: inherit; cursor: pointer; }
.ht-lang-btn {
  height: 30px; border: 1px solid #19212a; border-radius: 6px; background: #27303a; color: #d7dde3;
  box-shadow: inset 0 2px 0 0 #5d6977; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s linear, filter .15s linear;
}
.ht-lang-btn { width: 54px; padding: 0 7px; justify-content: space-between; font-size: 10px; }
.ht-lang-btn:hover { filter: brightness(125%); }
.ht-lang-btn:active { filter: brightness(85%); }
.ht-flag { width: 22px; height: 14px; background: no-repeat center / contain; }
.ht-lang { position: relative; }
/* the flags list: the look info's hotel picker */
.ht-lang-list {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; background: #fff;
  border: 1px solid #d4d6d5; border-radius: 6px; padding: 6px; grid-template-columns: repeat(3, 34px); gap: 4px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}
.ht-lang-list.open { display: grid; }
.ht-lang-list div {
  width: 34px; height: 26px; border-radius: 4px; cursor: pointer; background: no-repeat center; outline: none;
}
.ht-lang-list div:hover, .ht-lang-list div:focus, .ht-lang-list div.active { background-color: #d8dde2; }

/* small screens: the user bar is already full (login fields): the flag goes over the
   header's sky, top left */
@media only screen and (max-width: 40em) {
  .ht-prefs { position: absolute; top: 10px; left: 10px; z-index: 60; margin: 0; }
  .ht-lang-list { left: 0; right: auto; }
}