@layer components {
  .nav {
    --nav-background: var(--color-void);
    --nav-border-color: oklch(var(--lch-white) / 12%);
    --nav-color: var(--color-paper);
    --nav-gap: var(--inline-space-double);

    background-color: var(--nav-background);
    border-block-end: 1px solid var(--nav-border-color);
    color: var(--nav-color);

    padding-block: calc(var(--block-space-half) + var(--custom-safe-inset-top))
      var(--block-space-half);
    padding-inline: calc(var(--main-padding) + var(--custom-safe-inset-left))
      calc(var(--main-padding) + var(--custom-safe-inset-right));
    position: relative;
  }

  .nav__inner {
    align-items: center;
    column-gap: var(--nav-gap);
    display: flex;
    flex-wrap: wrap;
    margin-inline: auto;
    max-inline-size: var(--main-width);
    row-gap: var(--block-space-half);
  }

  .nav__brand {
    --icon-size: 2rem;

    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: var(--inline-space);
    margin-inline-end: var(--inline-space);
    text-decoration: none;
  }

  .nav__wordmark {
    font-family: var(--font-display);
    font-size: var(--text-medium);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;

    span {
      color: var(--color-primary);
    }

    @media (max-width: 639px) {
      display: none;
    }
  }

  .nav__links {
    align-items: center;
    column-gap: var(--nav-gap);
    display: flex;
    flex-wrap: wrap;
    row-gap: 0;

    a {
      color: var(--nav-color);
      display: inline-block;
      font-size: var(--text-small);
      padding-block: 0.35em;
      text-decoration: none;
    }

    @media (max-width: 959px) {
      display: none;
    }
  }

  /* Team selector */
  .nav__selector {
    position: relative;
    margin-inline-start: auto;

    .popup__section--nav-links {
      @media (min-width: 960px) {
        display: none;
      }
    }

    .icon--menu {
      @media (min-width: 960px) {
        display: none;
      }
    }
  }

  .nav__selector .popup {
    font-size: var(--text-small);
    inset-block-start: calc(100% + var(--block-space-half));

    @media (max-width: 939px) {
      position: fixed;
      inset: var(--nav-bottom) 0 0;
      inline-size: 100%;
      max-block-size: none;
      max-inline-size: none;
      margin: 0;
      translate: none;
    }
  }

  .nav__selector .popup::backdrop {
    background: color-mix(in srgb, var(--color-ink-darker) 65%, transparent);
  }

  .nav__selector .popup__section {
    inline-size: 100%;
  }

  .nav__team-switcher-avatar {
    --accent-color: var(--color-primary);
    --avatar-border-radius: 0;
    --avatar-size: 2ch;
  }

  .nav__team-switcher-avatar--shared {
    opacity: 0.55;
  }

  .nav__team-switcher-identity {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    line-height: 1.15;
    min-inline-size: 0;
  }

  .nav__team-switcher-name,
  .nav__team-switcher-context {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav__team-switcher-context {
    font-size: var(--text-x-small);
    font-weight: 400;
  }

  .nav__team-switcher-check {
    flex-shrink: 0;
    font-size: var(--text-x-small);
    margin-inline-start: auto;
  }

  .nav__selector-trigger {
    --btn-background: transparent;
    --btn-border-size: 0;
    --btn-color: var(--nav-color);
  }

  .nav__selector-avatar {
    --accent-color: var(--color-primary);
    --avatar-size: 3.5ch;
    --avatar-border-radius: 0;

    position: relative;

    > :nth-child(2) {
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      inset-block-end: -0.5ch;
      inset-inline-end: -0.5ch;
      height: auto;
      position: absolute;
      width: 2.25ch;
    }
  }

  .nav__selector-identity {
    font-size: var(--text-small);
    align-items: start;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    max-inline-size: 15rem;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* Team name (team routes) or user name */
    > :first-child {
      font-size: var(--text-small);
      font-weight: 600;
    }

    > :nth-child(2) {
      font-size: var(--text-x-small);
      font-weight: 400;
    }
  }

  /* For screen readers */
  .nav__skip-navigation {
    --left-offset: -999em;

    inset-block-start: 4rem;
    inset-inline-start: var(--left-offset);
    position: absolute;
    white-space: nowrap;
    z-index: 1;

    &:focus {
      --left-offset: var(--inline-space);
    }
  }
}