/**
 * @file
 * The language picker: 78 checkboxes in a grid, in a box that scrolls down.
 */
/*
 * A grid, not CSS columns: columns inside a box of limited height do not
 * scroll down, they add more columns to the right, out of sight (78 languages
 * made the box 2.5 times wider than the page). The grid fits as many 13rem
 * columns as the width allows and scrolls vertically; names run alphabetically
 * along the rows.
 */
.nexia-order-languages .form-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  column-gap: 1.5rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.nexia-order-languages .form-checkboxes .form-item {
  margin-block: 0.15rem;
}

.nexia-order-languages input:disabled + label {
  opacity: 0.5;
}

/* The flag in front of each language name (NexiaLanguages::FLAGS). */
.nexia-order-languages .nexia-flag {
  width: 1.25em;
  height: 0.9375em;
  margin-right: 0.45em;
  vertical-align: -0.1em;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}