/* Site-local styles: interactive examples in the blog article. */
.article-theme-controls > span {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.article-theme-controls label {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--corner-radius);
  padding: 0.2rem 0.45rem;
  color: var(--interactive-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.article-theme-controls label:hover {
  border-color: var(--strong);
  color: var(--strong);
}

body:has(#background-opacity-0:checked) .article-theme-controls label[for="background-opacity-0"],
body:has(#background-opacity-10:checked) .article-theme-controls label[for="background-opacity-10"],
body:has(#background-opacity-20:checked) .article-theme-controls label[for="background-opacity-20"],
body:has(#background-opacity-30:checked) .article-theme-controls label[for="background-opacity-30"],
body:has(#background-opacity-40:checked) .article-theme-controls label[for="background-opacity-40"],
body:has(#background-opacity-50:checked) .article-theme-controls label[for="background-opacity-50"],
body:has(#background-opacity-60:checked) .article-theme-controls label[for="background-opacity-60"],
body:has(#background-opacity-70:checked) .article-theme-controls label[for="background-opacity-70"],
body:has(#background-opacity-80:checked) .article-theme-controls label[for="background-opacity-80"],
body:has(#background-opacity-90:checked) .article-theme-controls label[for="background-opacity-90"],
body:has(#background-opacity-100:checked) .article-theme-controls label[for="background-opacity-100"],
body:has(#rounding-square:checked) .article-theme-controls label[for="rounding-square"],
body:has(#rounding-soft:checked) .article-theme-controls label[for="rounding-soft"],
body:has(#rounding-rounded:checked) .article-theme-controls label[for="rounding-rounded"],
body:has(#rounding-round:checked) .article-theme-controls label[for="rounding-round"],
body:has(#theme-lcars-2357:checked) .article-theme-controls label[for="theme-lcars-2357"],
body:has(#theme-lcars-2369:checked) .article-theme-controls label[for="theme-lcars-2369"],
body:has(#theme-lcars-2375:checked) .article-theme-controls label[for="theme-lcars-2375"],
body:has(#theme-lcars-2379:checked) .article-theme-controls label[for="theme-lcars-2379"] {
  border-color: var(--index-selected-border);
  background: var(--index-selected-bg);
  color: var(--index-selected-text);
}

.article-theme-controls {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.75rem 0 1rem;
}

body:has(#theme-popover .theme-background-opacity) .article-opacity-controls,
body:has(#rounding-square):has(#rounding-soft):has(#rounding-rounded):has(#rounding-round) .article-rounding-controls,
body:has(#theme-lcars-2357):has(#theme-lcars-2369):has(#theme-lcars-2375):has(#theme-lcars-2379) .article-lcars-controls {
  display: flex;
}