@layer components {
  .site-header {
    background: var(--color-ink-darkest);
    color: var(--color-white);
    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: var(--color-white);
    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(var(--lch-white) / 10%);
    }
  }

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

    &:hover {
      color: var(--color-white);
      background: oklch(var(--lch-white) / 10%);
    }
  }

  /* Popup section title */
  .popup__section-title {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    font-weight: 600;
    text-transform: uppercase;
    padding: var(--inline-space-half);
  }

  /* Mind switcher - unread dot */
  .mind-switcher:has(.unread-badge .badge:not(.hidden))::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 8px;
    height: 8px;
    background: var(--color-negative);
    border-radius: 50%;
  }

  /* Mind switcher popup */
  .mind-switcher__popup {
    min-inline-size: 280px;
  }

  .mind-switcher__item {
    display: flex;
    align-items: stretch;

    .popup__btn {
      flex: 1;
    }
  }

  .mind-switcher__item--active {
    background: var(--color-selected-light);
    border-radius: 0.3em;
  }

  .mind-switcher__settings {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--inline-space-half);
    color: var(--color-ink-medium);
    text-decoration: none;

    &:hover {
      color: var(--color-ink);
    }
  }

  .mind-switcher__section-title {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    font-size: var(--text-small);
    font-weight: 600;
    padding: var(--inline-space-half);
    color: var(--color-ink-dark);
  }

  .mind-switcher__new-hub-form {
    padding: var(--inline-space-half);
  }
}