---
import { logos } from 'virtual:starlight/user-images';
import config from 'virtual:starlight/user-config';

const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
---

<div class="title-row sl-flex">
  <a href={siteTitleHref} class="site-title sl-flex">
    {
      config.logo && logos.dark && (
        <>
          <img
            class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
            alt={config.logo.alt}
            src={logos.dark.src}
            width={logos.dark.width}
            height={logos.dark.height}
          />
          {!('src' in config.logo) && (
            <img
              class="dark:sl-hidden print:block"
              alt={config.logo.alt}
              src={logos.light?.src}
              width={logos.light?.width}
              height={logos.light?.height}
            />
          )}
        </>
      )
    }
    <span class:list={{ 'sr-only': config.logo?.replacesTitle }} translate="no">
      {siteTitle}
    </span>
  </a>
  <nav class="title-nav" aria-label="Primary">
    <a href="/docs/">Docs</a>
  </nav>
</div>

<style>
  @layer starlight.core {
    .title-row {
      align-items: baseline;
      gap: 1rem;
      min-width: 0;
    }

    .site-title {
      align-items: baseline;
      gap: var(--sl-nav-gap);
      font-size: var(--sl-text-h4);
      font-weight: 600;
      color: var(--sl-color-text-accent);
      text-decoration: none;
      white-space: nowrap;
      min-width: 0;
    }

    span {
      overflow: hidden;
    }

    img {
      height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: 0 50%;
    }

    .title-nav {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      font-size: var(--sl-text-sm);
      font-weight: 600;
      line-height: 1;
    }

    .title-nav a {
      color: var(--sl-color-text-accent);
      text-decoration: none;
      transition: color 120ms ease;
    }

    .site-title {
      transition: color 120ms ease;
    }

    .site-title:hover,
    .title-nav a:hover {
      color: var(--sl-color-accent-high);
    }

    @media (max-width: 35rem) {
      .title-nav {
        display: none;
      }
    }
  }
</style>