/*
 * the appview's stylesheet, compiled against the docs tailwind
 * config (see tailwind.config.cjs). this brings in the base layer
 * (14px root font size, link/code styles, selection color) and the
 * component classes (.btn, .btn-create, .btn-flat, ...).
 */
@import "../../../input.css";

/* preflight is disabled (starlight has its own reset), but tailwind's
 * border utilities assume preflight's `border-style: solid` reset */
.btn,
.hero .sl-link-button,
[class*="border-"] {
  border-style: solid;
}

/* logo at the same size as the appview topbar logotype (h-8) */
.site-title img {
  @apply h-8;
}

/* markdown content, styled like the appview renders readmes:
 * plain black/white links, bordered h1/h2, gray inline code */
/* like `prose` links in appview readmes: underlined, medium weight.
 * NB: the card exclusion must not say `.btn` here — tailwind's @apply
 * of .btn/.btn-create elsewhere clones every rule that mentions .btn
 * in its selector, re-introducing the underline through the clone */
.sl-markdown-content a:not(.feature-card):not(:where(.not-content *)) {
  @apply text-black underline font-medium hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
}

.sl-markdown-content h1:not(:where(.not-content *)) {
  @apply mt-3 pb-3 border-b border-gray-300 dark:border-gray-600;
}

.sl-markdown-content h2:not(:where(.not-content *)) {
  @apply mt-3 pb-3 border-b border-gray-200 dark:border-gray-700;
}

.sl-markdown-content code:not(:where(.not-content *)) {
  @apply font-mono rounded px-1 bg-gray-100 text-black dark:bg-gray-700 dark:text-white;
}

/* the appview's base `label` style (block, py-2, text-sm) clobbers
 * starlight's select labels — starlight's own styles live in css
 * cascade layers and lose to the unlayered appview css */
starlight-theme-select label,
starlight-lang-select label {
  display: flex;
  padding: 0;
  font-size: unset;
  color: var(--sl-color-gray-1);
}

starlight-theme-select label:hover,
starlight-lang-select label:hover {
  color: var(--sl-color-gray-2);
}

/* sidebar current-page pill, like the appview settings sidebar tabs */
.sidebar-content a[aria-current="page"],
.sidebar-content a[aria-current="page"]:hover,
.sidebar-content a[aria-current="page"]:focus {
  @apply bg-gray-100 text-black font-semibold dark:bg-gray-700 dark:text-white;
}

/* text links in the top bar (see components/HeaderLinks.astro) */
a.header-link,
a.header-link:hover {
  @apply text-sm no-underline text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white;
}

/* compact next/prev pagination links */
.pagination-links a {
  @apply p-3 gap-2 rounded no-underline hover:no-underline;
}

.pagination-links a .link-title {
  @apply text-base font-semibold;
}

.pagination-links a svg {
  @apply size-5;
}

/* restyle starlight's hero buttons with the appview button classes */
.hero .sl-link-button.primary {
  @apply btn-create text-base;
}

.hero .sl-link-button.primary:hover {
  @apply text-white no-underline;
}

.hero .sl-link-button.minimal {
  @apply btn-flat text-base;
}