/* mioMemo v0.15.14 — language picker layout.
 * Keep the picker compact in the top bar and make the popover usable on narrow screens.
 */
.language-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

/* topbar-icon-button is a fixed circular grid button. The language picker contains
 * both an icon and text, so it must explicitly opt out of that fixed-width layout. */
.topbar-icon-button.language-button {
  width: auto;
  min-width: 3.15rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 0 .5rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}

.language-button-globe {
  display: inline-block;
  flex: 0 0 auto;
  font-size: .92rem;
  line-height: 1;
}

.language-button-label {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6rem;
  font-size: .72rem;
  line-height: 1;
}

.language-button-short {
  display: none;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
}

.language-menu {
  min-width: 11rem;
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.language-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
}

.language-option.active::after {
  content: '✓';
  flex: 0 0 auto;
  font-weight: 700;
}

.language-option-code {
  margin-left: auto;
  opacity: .58;
  font-size: .72rem;
}

@media (max-width: 700px) {
  .topbar-icon-button.language-button {
    height: 1.9rem;
    min-width: 3rem;
    padding: 0 .4rem;
  }

  .language-menu {
    position: fixed;
    top: 3.45rem;
    right: .5rem;
    left: auto;
    width: min(11rem, calc(100vw - 1rem));
    min-width: 0;
    max-width: calc(100vw - 1rem);
  }
}

@media (max-width: 560px) {
  .language-button-label {
    display: none;
  }

  .language-button-short {
    display: inline-block;
  }
}