/* SPDX-License-Identifier: Apache-2.0 */
#panel {
  color: var(--text-color);
}

#panel > div {
  padding: 1rem;
}

.hidden {
  display: none;
}

fieldset {
  margin-top: 1rem;
}

/* The Layouts the user can choose between, one icon button per Layout. */
.layouts-row {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

/* Transparent border on every button, so that selecting one does not move the others. */
.layouts-row button {
  border: solid 1px transparent;
  border-radius: 3px;
}

.layouts-row button.selected {
  border-color: var(--text-color-grad2);
  background-color: var(--bkg-color-grad1);
}

/* Schema of the Grid: one row per row of the Grid, one select per Cell. */
.cells-row {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.cell-select {
  flex: 1 1 0;
  /* Prevents the selects from growing over the width of the panel. */
  min-width: 0;
}

.option {
  margin-top: 0.5rem;
  display: flex;
}

.option select,
.option input {
  flex-grow: 1;
}

.option input.gg-checkbox {
  flex-grow: 0;
}

.option label {
  margin-right: 0.5rem;
}

.option label:after {
  content: ' :';
}