@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;
    margin-inline: auto;
    max-inline-size: var(--main-width);
    min-height: 3rem;
    row-gap: var(--block-space-half);

    @media (max-width: 400px) {
      --nav-gap: var(--inline-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;
    }

    html[data-theme="dark"] & {
      span {
        color: oklch(var(--lch-gold-dark));
      }
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        span {
          color: oklch(var(--lch-gold-dark));
        }
      }
    }
  }

  .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) {
      block-size: 100dvh;
      flex-direction: column;
      inline-size: min(70vw, 24rem);
      inset: 0 0 0 auto;
      margin: 0;
      position: fixed;
      max-block-size: none;
      max-inline-size: none;
      translate: 100% 0;
      transition:
        display 300ms var(--ease-in-out-jump) allow-discrete,
        overlay 300ms var(--ease-in-out-jump) allow-discrete,
        translate 300ms var(--ease-in-out-jump);

      &[open] {
        translate: 0;
      }

      @starting-style {
        &[open] {
          translate: 100% 0;
        }
      }
    }
  }

  .nav__sheet-header {
    display: none;

    @media (max-width: 939px) {
      display: flex;
      flex: 0 0 auto;
      justify-content: end;
    }
  }

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

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

  .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);
    }
  }
}