/* Themes: the swatch strips on the index, the colour fields on the form and
 * the mock graphs under it. Unlayered like the stage sheets it augments, so a
 * rule here is not silently outranked.
 * ---------------------------------------------------------------------- */

.theme-strip {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-s);
  display: flex;
  overflow: hidden;
}

.theme-strip__block {
  background: var(--series-color);
  flex: 1 1 0;
  height: 1.5rem;
}

.theme-swatches {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 0;
  padding: 0;
}

.theme-swatch {
  align-items: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-s);
  display: grid;
  gap: 0 var(--space-xs);
  grid-template-areas:
    "chip label hex"
    "chip ratio ratio";
  grid-template-columns: auto 1fr auto;
  padding: var(--space-xs);
}

.theme-swatch__chip {
  background: var(--series-color);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-s);
  grid-area: chip;
  height: 2.25rem;
  width: 2.25rem;
}

.theme-swatch--turf .theme-swatch__chip {
  background:
    linear-gradient(var(--series-color), var(--series-color)) center / 60% 60% no-repeat,
    var(--ps-turf);
}

.theme-swatch__label {
  font-weight: 600;
  grid-area: label;
}

.theme-swatch__hex {
  font-size: var(--text-x-small, 0.75rem);
  grid-area: hex;
}

.theme-swatch__ratio {
  font-size: var(--text-x-small, 0.75rem);
  grid-area: ratio;
}

.theme-fields {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.theme-field__picker {
  background: none;
  block-size: 2.5rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-s);
  cursor: pointer;
  inline-size: 3rem;
  padding: 2px;
}

.theme-field__hex {
  inline-size: 8rem;
}

.theme-preview-frame {
  display: block;
}

.theme-preview {
  border-block-start: 1px solid var(--color-border-subtle);
  padding-block-start: var(--space-l);
}

.theme-preview__turf {
  background: var(--ps-turf);
  border-radius: var(--border-radius-m);
  display: block;
  inline-size: 100%;
  max-inline-size: 44rem;
}

.theme-preview .xg-race,
.theme-preview .spider-plot,
.theme-preview .scatter-plot {
  margin-inline: auto;
}