@import 'code-examples.css';
@import 'code-highlighter.css';
@import 'copy-code.css';
@import 'outline.css';
@import 'search.css';
@import 'cera-typeface.css';
@import 'theme-icons.css';
@import 'utils.css';

:root {
  /* layout-based example style aspects */
  --layout-example-border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
  --layout-example-border-radius: var(--wa-border-radius-l);
  --layout-example-padding: var(--wa-space-s);
  --layout-example-element-background: var(--wa-color-indigo-60);
  --layout-example-element-color: var(--wa-color-indigo-05);
  --layout-example-element-border-radius: var(--wa-border-radius-m);
}

/* "Browse\ ___" / "Back to ___" link with an arrow that nudges on hover */
.browse-all-link wa-icon,
.back-link wa-icon {
  vertical-align: -0.1em;
  transition: transform var(--wa-transition-normal) var(--wa-transition-easing);
}

.browse-all-link wa-icon {
  margin-inline-start: 0.25em;
}

.back-link wa-icon {
  margin-inline-end: 0.25em;
}

.browse-all-link:hover wa-icon {
  transform: translateX(0.25em);
}

.back-link:hover wa-icon {
  transform: translateX(-0.25em);
}

.wa-dark .only-light,
.only-dark:not(.wa-dark, .wa-dark *) {
  display: none;
}

body {
  opacity: 1;
  transition: opacity 200ms ease-out;
}

body.theme-transitioning {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

/* Header */
wa-page::part(body) {
  padding-block-start: 0;
}

wa-page::part(header-actions) {
  align-self: center;
}

wa-button.delete {
  &::part(base):hover {
    color: var(--wa-color-danger-on-quiet);
    background: var(--wa-color-danger-fill-quiet);
  }

  &:not(:hover, :focus) {
    opacity: 0.5;
  }
}

/* Main padding tiers as chrome unfolds: drawer → sidebar in column →
 * sidebar plus outline aside. Inline padding follows --content-padding-inline
 * so main and the chrome bands tighten together on mobile. */
wa-page > main {
  padding-block: var(--wa-space-xl);
  padding-inline: var(--content-padding-inline);
  margin-inline: auto;
}

wa-page:not([view='mobile']) > main {
  padding-inline: var(--wa-space-4xl);
}

@media screen and (min-width: 75rem) {
  wa-page > main {
    padding-block: var(--wa-space-3xl);
  }
}

/* Reserve aside-column space on prose-no-outline pages so main keeps the
 * same width as outline-bearing prose pages. Gated to viewports where the
 * aside actually shows (outline.css hides it below 1200px). Pages can
 * override --aside-width locally to span full width. */
@media screen and (min-width: 75rem) {
  .has-prose-content:not(.has-outline) wa-page {
    --aside-width: calc(240px + 2 * var(--content-padding-inline));
  }
}

:is(.layout-docs, .layout-component, .layout-page, .layout-page-outline, .layout-pattern) .page-footer {
  padding: var(--wa-space-xl);
  border-block-start: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
  margin-block-start: var(--wa-space-2xl);
}

/* Docs footer stays compact at every viewport. Site/app surfaces use the
 * larger --wa-font-size-s default from site.css and only drop to xs in
 * wa-page's mobile view (see site.css's @layer wa-site). */
:is(.layout-docs, .layout-component, .layout-page, .layout-page-outline, .layout-pattern) .page-footer-content {
  font-size: var(--wa-font-size-xs);
}

/* Center the prose wrapper inside main so the line-length cap reads as a
 * centered reading column, not a flush-left one. */
#content > .wa-prose {
  margin-inline: auto;
}

/* Anchor wa-prose's line-length to the docs' reading-column token instead
 * of its 65ch default. The override has to land on .wa-prose itself —
 * upstream prose.css declares --wa-prose-line-length on :where(.wa-prose),
 * and a value declared on the element wins over an inherited value even
 * at 0 specificity. */
#content > .wa-prose {
  --wa-prose-line-length: var(--content-width-m);
}

#content {
  /* Remap wa-prose's em-based rhythm to the docs' rem-based spacing scale.
     wa-prose intentionally scales with element font-size, but the docs were
     authored against the rem-based rhythm and depend on that visual cadence. */
  --wa-prose-rhythm-2xs: var(--wa-space-2xs);
  --wa-prose-rhythm-xs: var(--wa-space-xs);
  --wa-prose-rhythm-s: var(--wa-space-s);
  --wa-prose-rhythm-m: var(--wa-space-m);
  --wa-prose-rhythm-l: var(--wa-space-l);
  --wa-prose-rhythm-xl: var(--wa-space-xl);
  --wa-prose-rhythm-2xl: var(--wa-space-2xl);
  --wa-prose-rhythm-3xl: var(--wa-space-3xl);

  /* Extend wa-prose's major-blocks treatment to `.code-example` live demos
     (wa-prose covers `<details>` natively). */
  .code-example:has(+ *) {
    margin-block-end: var(--wa-prose-rhythm-xl);
  }
  :not(h1, h2, h3, h4, h5, h6) + .code-example {
    margin-block-start: var(--wa-prose-rhythm-xl);
  }
  :is(h1, h2, h3, h4, h5, h6) + .code-example {
    margin-block-start: var(--wa-prose-rhythm-m);
  }

  /* The anchor-heading transformer injects a <wa-tooltip> between stacked headings,
     breaking the sibling adjacency prose.css tightens on — bridge it through the tooltip. */
  .anchor-heading:has(+ wa-tooltip + .anchor-heading) {
    margin-block-end: 0;
  }
  .anchor-heading + wa-tooltip + .anchor-heading {
    margin-block-start: var(--wa-prose-rhythm-m);
  }

  /* Treat h2 + `<small><time>` as one header unit (changelog releases). */
  h2:has(+ p > small > time) {
    margin-block-end: var(--wa-space-3xs);
  }
  h2 + p:has(> small > time) {
    margin-block-start: 0;
    margin-block-end: var(--wa-space-l);
    color: var(--wa-color-text-quiet);
  }

  /* Subordinate prerelease version headings inside `<details data-no-outline>`
     so they read as historical, not peer to current releases. */
  details[data-no-outline] h2 {
    font-size: var(--wa-font-size-l);
    margin-block-start: var(--wa-space-l);
  }

  /* Improve repetitive code elements in tables by making them less distracting and not wrapping too soon */
  table code,
  .dependency-list code {
    background-color: transparent;
    white-space: nowrap;
  }
}

.component-ref {
  color: inherit;
  text-decoration: none;

  &:hover {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-hover);
  }
}

/* GitHub refs (`[issue:N]`/`[pr:N]`/`[discuss:N]`) rewritten by replaceTextPlugin. */
.ref-link {
  margin-inline-start: var(--wa-space-3xs);
  text-decoration: none;
  color: inherit;

  & wa-badge {
    font-size: var(--wa-font-size-2xs);
  }
}

/* Changelog category groups. Icon bullets injected by _transformers/changelog-list-icons.js. */
.changelog-group {
  & + .changelog-group {
    margin-block-start: var(--wa-space-l);
    padding-block-start: var(--wa-space-l);
    border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  }

  & > ul {
    list-style: none;
    padding-inline-start: 0;

    /* Resets native.css `li { margin-inline-start: 1.125em }` so the icon
       column sits flush with the prose left edge. */
    & > li {
      position: relative;
      margin-inline-start: 0;
      padding-inline-start: calc(1.25em + var(--wa-space-s));

      & + li {
        margin-block-start: var(--wa-space-s);
      }

      /* Bigger gap after entries with a nested list. */
      &:has(:is(ul, ol)) + li {
        margin-block-start: var(--wa-space-m);
      }

      & :is(ul, ol) {
        margin-block: var(--wa-space-xs);

        /* `::marker` ignores opacity; bake de-emphasis into the color. */
        & > li::marker {
          color: color-mix(in oklch, var(--wa-color-text-quiet) 60%, transparent);
        }
      }

      & > .changelog-bullet {
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0.4em;
        color: var(--wa-color-text-quiet);
        font-size: var(--wa-font-size-s);
      }
    }
  }
}

h1.title wa-badge {
  vertical-align: middle;
  font-size: 1.5rem;
}

.component-info {
  margin-block-end: var(--wa-content-spacing);

  code {
    line-height: var(--wa-line-height-condensed);
  }

  .component-tag {
    background-color: transparent;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-l);
  }

  /* The category and since badges are wrapped in an <a> for the link, but the
     wrapper was introducing a baseline offset against the bare wa-badge
     siblings. Using display: contents removes the anchor's box from layout so
     the badge becomes a direct flex child of the cluster (same as the others). */
  .component-category-link,
  .component-since-link {
    display: contents;
    text-decoration: none;
  }
}

.component-summary {
  font-weight: var(--wa-font-weight-semibold);
  font-size: var(--wa-font-size-l);
}

/* Callouts in content */
#content > wa-callout {
  &[variant='brand'] code {
    background-color: color-mix(in oklab, var(--wa-color-brand-fill-soft), black 2.5%);
  }
}

/* Images & Figures */
figure.signpost {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wa-space-s);

  img {
    border: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
  }

  figcaption {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
    line-height: var(--wa-line-height-condensed);
    text-align: center;
  }
}

.search-list {
  container-type: inline-size;
  .search-list-input {
    margin-block-end: var(--wa-space-3xl);
  }

  .search-list-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wa-space-2xl);
    margin-block-end: var(--wa-space-3xl);

    @container (inline-size < 48rem) {
      grid-template-columns: repeat(3, 1fr);
    }

    @container (inline-size < 36rem) {
      grid-template-columns: repeat(2, 1fr);
    }

    @container (inline-size < 24rem) {
      grid-template-columns: repeat(1, 1fr);
    }

    &.large {
      grid-template-columns: repeat(2, 1fr);

      @container (inline-size < 40rem) {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    a {
      border-radius: var(--wa-border-radius-l);
      text-decoration: none;
    }

    wa-card {
      --spacing: var(--wa-space-m);

      [slot='header'] {
        display: flex;
      }

      &[with-header]::part(header) {
        background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
        display: flex;
        align-items: center;
        justify-content: center;
        min-block-size: calc(6rem + var(--spacing));
        padding: var(--spacing);
      }
    }
  }
}

wa-card .page-name {
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-action);
}

/* Restore full-size rendering of platform symbols (⌘, ⌥, ⇧, etc.) inside <kbd>,
   which uses a code font that tends to render these glyphs undersized. */
.kbd-symbol {
  font-family: var(--wa-font-family-body);
}

/* Card-based, name-first listing layout used by component/pattern/utility browse pages */
.component-list,
.modern-card-list {
  container-type: inline-size;

  .search-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wa-space-m);
    margin-block-end: var(--wa-space-l);

    @container (inline-size < 56rem) {
      grid-template-columns: repeat(2, 1fr);
    }

    @container (inline-size < 35rem) {
      grid-template-columns: 1fr;
    }

    a {
      color: var(--wa-color-text-normal);
      text-decoration: none;
    }

    wa-card {
      --spacing: var(--wa-space-m);
      block-size: 100%;
    }

    wa-card::part(body) {
      display: flex;
      flex-direction: column;
      block-size: 100%;
    }

    .page-name {
      display: block;
      font-size: var(--wa-font-size-l);
      font-weight: var(--wa-font-weight-heading);
      line-height: var(--wa-line-height-condensed);
      margin-block-end: var(--wa-space-xs);
    }

    .component-list-summary,
    .modern-card-summary {
      color: var(--wa-color-text-quiet);
      font-size: var(--wa-font-size-s);
      line-height: var(--wa-line-height-normal);
      margin: 0 0 var(--wa-space-m);

      &:last-child {
        margin-block-end: 0;
      }
    }

    .component-list-badges {
      font-size: var(--wa-font-size-s);
      margin-block-start: auto;
    }
  }
}

/* Component list: centered search input (anchors a hero-style browse page) */
.component-list {
  .search-list-input {
    display: block;
    max-inline-size: 32rem;
    margin-inline: auto;
    margin-block: var(--wa-space-m) var(--wa-space-s);
  }

  .search-list-shortcut {
    text-align: center;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    margin-block: 0 var(--wa-space-2xl);
  }
}

/* Modern card list: left-aligned "Browse X" heading + search input (used by utilities, tokens, patterns) */
.modern-card-list-heading {
  margin-block: 0 var(--wa-space-xl);
}

.modern-card-list {
  .search-list-input {
    display: block;
    max-inline-size: 32rem;
    margin-block: 0 var(--wa-space-2xl);
  }

  .modern-card-list-category {
    margin-block: var(--wa-space-2xl) var(--wa-space-m);
    font-size: var(--wa-font-size-xl);

    &:first-of-type {
      margin-block-start: 0;
    }
  }
}

/* Framework docs: hub logo cards + framework-page info cards */

/* Hub: brand logos sit in a fixed-height row, always in full brand color */
.framework-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 2.5rem;
}

.framework-icon {
  max-inline-size: 6.5rem;
  font-size: var(--wa-font-size-3xl);
  color: var(--color, currentColor);
}

.search-list-grid .framework-card::part(body) {
  align-items: center;
  justify-content: center;
  gap: var(--wa-space-s);
  min-block-size: 8rem;
  text-align: center;
}

.framework-card .page-name {
  margin: 0;
}

/* Framework pages: "next steps" / "see it in action" info cards */
.info-cards .search-list-grid wa-card {
  --spacing: var(--wa-space-l);
}

.info-cards .search-list-grid .page-name {
  font-size: var(--wa-font-size-m);
}

.info-card-icon {
  margin-block-end: var(--wa-space-s);
  font-size: var(--wa-font-size-xl);
}

/* Duotone icon whose secondary (brand) color fades in on hover.
   Companion to .duotone-illustrated (utils.css); ported so it also works on the free docs build. */
.duotone-hover-context wa-icon.duotone-illustrated.duotone-secondary-reveal {
  --secondary-opacity: 0;
  transition: --secondary-opacity var(--wa-transition-slow) ease-in-out;
}

.duotone-hover-context[data-duotone-hover-trigger]:is(:hover, :focus-visible)
  wa-icon.duotone-illustrated.duotone-secondary-reveal,
.duotone-hover-context:has(:is(a, button):is(:hover, :focus-visible))
  wa-icon.duotone-illustrated.duotone-secondary-reveal {
  --secondary-opacity: 1;
}

/* Reduced motion + touch: show the two-tone icon up front instead of on hover */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .duotone-hover-context wa-icon.duotone-illustrated.duotone-secondary-reveal {
    transition: none;
    --secondary-opacity: 1;
  }
}

/* Design Tokens Swatches */
.swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-color: transparent;
  border-style: var(--wa-border-style);
  border-width: var(--wa-border-width-s);
  border-radius: var(--wa-border-radius-m);
  box-sizing: border-box;
  min-block-size: 3rem;
  min-inline-size: 3rem;
  padding: var(--wa-space-xs);
  font-weight: var(--wa-font-weight-semibold);
  line-height: var(--wa-line-height-condensed);
}

.token-name {
  white-space: nowrap;
}

/* Component API tables */
wa-scroller:has(.component-table) {
  margin-block-end: var(--wa-space-xl);
}

#content {
  .component-table {
    font-variant-numeric: tabular-nums;

    .table-name {
      white-space: nowrap;
    }

    .table-arguments,
    .table-description {
      min-inline-size: var(--line-length-s);

      code {
        white-space: normal;
      }
    }

    .table-selector {
      white-space: nowrap;
    }

    .table-selector .wa-cluster {
      flex-wrap: nowrap;
    }

    .table-reflect {
      text-align: center;
    }

    code {
      white-space: inherit;
      background: transparent;
      padding-inline: 0;
    }
  }

  .component-help {
    display: flex;
    inline-size: 100%;
    gap: var(--wa-space-m);
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    margin-block-start: var(--wa-space-xl);

    strong {
      font-size: var(--wa-font-size-s);
      font-weight: var(--wa-font-weight-semibold);
    }
  }
}

/* Hosted project install instructions — tighter rhythm inside tab panels */
#content .hosted-project-instructions .instruction-group + .instruction-group,
#content .hosted-project-instructions .free-instructions + .pro-instructions {
  margin-block-start: var(--wa-space-xl);
}

#content .hosted-project-instructions table {
  margin-block: 0;
}

/* Icon docs: copy-button-wrapped icon previews. The copy button hosts a quiet
   neutral color; reset it so the slotted icons match a default wa-icon. */
#content .icon-copy-row wa-copy-button {
  color: inherit;
}