/* Language switcher, after barrisol360: a flag in a circle, and a dropdown
   of the other languages. Written out rather than assembled from theme
   utilities, whose rem steps are based on a 13px root and do not land on the
   sizes of the reference. */

.lang-switcher .flag
{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* inline-flex, so the button's baseline gap does not push the menu down. */
.lang-switcher
{
  display: inline-flex;
}

/* btn-icon on the button keeps the theme's own padding rule, which is far
   too specific to override, from applying. */
.lang-switcher .btn
{
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: #fafafa;
}

.lang-switcher .btn:hover
{
  background: #e4e4e7;
}

/* Bootstrap is told not to position the menu (data-bs-display), so it is
   placed here: under the flag, aligned on its right edge. */
.lang-switcher .dropdown-menu
{
  top: calc(100% + 8px);
  left: auto;
  right: 0;
  margin: 0;
  width: 192px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}

.lang-switcher .dropdown-item
{
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.lang-switcher .dropdown-item .flag
{
  margin-right: 12px;
}

/* Background only: the reference also asks for a hover text colour, but the
   colour it names is not defined in its palette and compiles to nothing. */
.lang-switcher .dropdown-item:hover,
.lang-switcher .dropdown-item:focus
{
  background: #e0f2fe;
}