/**
 * @file
 * The controls that restyle the columns of the roles table.
 *
 * One group per column, laid out across the page and wrapping when it runs
 * out of room, so the groups keep the order of the columns they belong to.
 * Plain CSS with fallbacks, like the rest of this module: the page has to be
 * usable in a theme that defines none of these variables.
 */

.table-style-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-end: 1rem;
}

.table-style-controls .table-style-column {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.75rem 0.75rem;
  border: var(--border-width, 1px) solid var(--color-border, currentColor);
}

.table-style-controls legend {
  padding-inline: 0.25rem;
  font-weight: bold;
}

/* One select per option, stacked, each under its own label. The selects are
 * full width so the four of them line up down the group whatever the length
 * of the value showing in them. */
.table-style-controls .form-item {
  margin-block: 0.5rem 0;
}

.table-style-controls select {
  max-width: 100%;
}