@use "../../styles/tokens/typography" as *;

.navbar {
  display: flex;
  align-items: center;
  gap: var(--nds-spacing-lg);
  height: 60px;
  padding: 0 var(--nds-spacing-lg);
  background-color: var(--nds-surface);
  border-bottom: var(--nds-border-width-thin) solid var(--nds-border);

  &__brand {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-xs);
  }
  &__mark {
    width: 24px;
    height: 24px;
    border-radius: var(--nds-radius-md);
    background: linear-gradient(135deg, var(--nds-primary), var(--nds-accent));
  }
  &__title {
    @include text-xl;
    font-size: 1rem;
    color: var(--nds-text);
  }

  &__links {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-xs);
    flex: 1;

    :global(.navbar__link) {
      padding: var(--nds-spacing-2xs) var(--nds-spacing-sm);
      border-radius: var(--nds-radius-md);
      @include text-label;
      color: var(--nds-text);
      text-decoration: none !important;
      transition: all 120ms ease;
  
    }
    :global(.navbar__link:hover) {
      background-color: var(--nds-surface-hover);
    }

    // On cible la variante active globale séparément
    :global(.navbar__link--active) {
      color: var(--nds-primary);
    }
  }
  &__right {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-sm);
  }
}