/* ---- header language and theme buttons (`ui/header_language.py`,
   `ui/header_chrome.py`) ---- */

/* The other language's own word on the ink, the size of the bar's icon
   buttons, and kept as a short word at every width (#254). */
.q-btn.aucra-language-btn {
  flex-shrink: 0;
  height: 36px;
  min-height: 36px;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--chrome-ink);
  font-size: 13px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.q-btn.aucra-language-btn:hover {
  background: var(--chrome-wash);
}
/* The platform's ring, not Quasar's pale helper (as on the undo buttons). */
.q-btn.aucra-language-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.aucra-language-btn .q-focus-helper {
  display: none;
}

/* The theme button (#257): an icon the size of the bar's icon buttons. */
.q-btn.aucra-chrome-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--chrome-ink);
}
.q-btn.aucra-chrome-btn:hover {
  background: var(--chrome-wash);
}
.q-btn.aucra-chrome-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.aucra-chrome-btn .q-focus-helper {
  display: none;
}
/* A phone's bar was full at 390px before the button came: under 480px it
   takes its word's width, and the bar's gap gives up the rest down to the
   3px brand.css sets under 390px. */
@media (max-width: 479px) {
  .q-btn.aucra-language-btn {
    min-width: 0;
    padding: 0 3px;
  }
  .q-btn.aucra-chrome-btn {
    width: 32px;
    min-width: 32px;
  }
  /* The search answers nothing yet, and the theme button needs its room.
     When search ships, the theme button moves into the user menu here. */
  .aucra-search {
    display: none;
  }
}
@media (min-width: 390px) and (max-width: 479px) {
  .aucra-header.q-header {
    gap: 4px;
  }
}