@layer components {
  .site-header {
    --header-bg: var(--color-ink-darkest);
    --header-text: var(--color-white);

    html[data-theme="dark"] & {
      --header-bg: var(--color-ink-lighter);
      --header-text: var(--color-ink);
      border-block-end: 1px solid var(--color-ink-lighter);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --header-bg: var(--color-ink-lightest);
        --header-text: var(--color-ink);
        border-block-end: 1px solid var(--color-ink-lighter);
      }
    }

    background: var(--header-bg);
    color: var(--header-text);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "start title end";
    align-items: center;
    padding-block: var(--block-space-half);
    padding-inline: var(--main-padding);
    position: relative;
    z-index: var(--z-nav);

    &:has(dialog[open]) {
      z-index: calc(var(--z-nav) + 1);
    }
  }

  .site-header__actions--start {
    grid-area: start;
  }

  .site-header__title {
    grid-area: title;
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
  }

  .site-header__actions--end {
    grid-area: end;
    display: flex;
    justify-content: flex-end;
  }

  .site-header__logo {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-weight: 700;
    font-size: var(--text-medium);
    text-decoration: none;
    padding: 0.2em 0.4em;
    border-radius: var(--radius);
    transition: background-color 100ms;

    &:hover {
      background: oklch(from currentColor l c h / 10%);
    }
  }

  .site-header__btn {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: var(--text-small);
    font-weight: 500;
    padding: 0.4em 0.6em;
    border-radius: var(--radius);
    transition: opacity 100ms, background-color 100ms;
    white-space: nowrap;

    &:hover {
      opacity: 1;
      background: oklch(from currentColor l c h / 10%);
    }
  }
}