/* The catalog shell, then the site's styles for rendered markdown, which is
   what the manual's page arrives as. What is here is the list of themes
   above it. */
@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.a9d2bbd1985b7de7.css";
@import "https://assets.elements.dev/assets/app/shared/styles/post-body.229d4509dd5c21df.css";

.themes-list {
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
}
.themes-item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.themes-name,
.themes-import {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: none;
  border: 0;
  padding: 0;
  overflow-wrap: anywhere;
}
.themes-name { color: var(--ink); font-weight: var(--weight-semibold); }
.themes-import { color: var(--ink-soft); }

/* The label changes to Copied; the width does not. */
.themes-copy { min-width: 5rem; }

@media (max-width: 640px) {
  .themes-item { grid-template-columns: minmax(0, 1fr) auto; }
  .themes-import { grid-column: 1 / -1; }
}