---
import Logotype from "../../assets/logotype.svg";
import Logomark from "../../assets/logomark.svg";

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

<a href={siteTitleHref} class="site-title sl-flex">
  <Logotype class="h-7 shrink-0 hidden md:inline-block" />
  <Logomark class="h-7 shrink-0 inline-block md:hidden" />

  <span class="sr-only" translate="no">
    {siteTitle}
  </span>
</a>

<style>
  .site-title {
    align-items: center;
    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%;
  }
</style>
