/* Colors of the Bootswatch Flatly theme. */
:root,
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #2c3e50;
  --md-primary-fg-color--light: #34495e;
  --md-primary-fg-color--dark: #1a252f;
  --md-accent-fg-color: #18bc9c;
  --md-accent-fg-color--transparent: rgba(24, 188, 156, 0.1);
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: #18bc9c;
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #1fd8b4;
}

/* Grey background for code, as in Flatly. */
[data-md-color-scheme="default"] {
  --md-code-bg-color: #ecf0f1;
}

/* Use case cards: one color for each card. Card n and section n share it. */
.use-case-1, .use-case-grid li:nth-child(1) { --use-case-color: #3498db; }
.use-case-2, .use-case-grid li:nth-child(2) { --use-case-color: #e74c3c; }
.use-case-3, .use-case-grid li:nth-child(3) { --use-case-color: #18bc9c; }
.use-case-4, .use-case-grid li:nth-child(4) { --use-case-color: #f39c12; }
.use-case-5, .use-case-grid li:nth-child(5) { --use-case-color: #9b59b6; }
.use-case-6, .use-case-grid li:nth-child(6) { --use-case-color: #e83e8c; }

/* The overview grid: each card is a link to its section. */
.md-typeset .grid.use-case-grid > ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.md-typeset .grid.use-case-grid > ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 0;
  border-left: 0.3rem solid var(--use-case-color);
  background-color: color-mix(in srgb, var(--use-case-color) 8%, transparent);
}

.md-typeset .grid.use-case-grid > ul > li:hover {
  background-color: color-mix(in srgb, var(--use-case-color) 18%, transparent);
}

.md-typeset .use-case-grid a {
  color: var(--md-typeset-color);
}

/* The link covers the full card, so a click anywhere opens the section. */
.md-typeset .use-case-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.md-typeset .use-case .twemoji,
.md-typeset .use-case-grid .twemoji {
  color: var(--use-case-color);
}

/* A section heading shows the color of its card. */
.md-typeset h2.use-case {
  padding-left: 0.6rem;
  border-left: 0.3rem solid var(--use-case-color);
}