@layer components {
  .navigation {
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    width: 100%; height: var(--navigation-height);
    margin-inline: auto;
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-4);
    background: var(--gray-950);
    border-block-end: 1px solid var(--gray-800);
    z-index: 2;

    @media (width >= 1024px) { padding-inline: var(--spacing-10); }

    .item {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      color: var(--gray-200);
    }

    .logo {
      letter-spacing: -.025em;
      text-decoration: none;
      font-size: 1rem;
      font-weight: 600;
      color: var(--gray-200);

      &:hover { color: var(--gray-400) };
    }

    .badge {
      font-size: .75rem;
      font-weight: 300;
      color: var(--gray-400);
    }

    .link {
      font-size: .875rem;
      font-weight: 500;
      text-decoration: none;
    }

    .icon {
      display: none;
      width: var(--spacing-6); height: auto;
      border: 0;
      background: transparent;
      aspect-ratio: 1;
      border-radius: var(--spacing-1);

      &:hover {
        background: var(--gray-900);
      }
    }
  }
}