@use '@angular/material' as mat;

.app-toolbar {
  @include mat.toolbar-overrides((
    container-background-color: var(--mat-sys-surface-container),
    container-text-color: var(--mat-sys-on-surface),
  ));

  position: sticky;
  top: 0;
  z-index: 10;
  gap: 8px;
  padding: 0 16px;
  box-shadow: var(--mat-sys-level2);
}

// Bootstrap (CDN) подчёркивает ссылки при наведении — для кнопок это лишнее
a,
a:hover {
  text-decoration: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
  color: var(--mat-sys-primary);
  font: var(--mat-sys-title-large);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 4px;
}

.nav a {
  @include mat.button-overrides((
    text-label-text-color: var(--mat-sys-on-surface-variant),
  ));
}

.nav a.active {
  @include mat.button-overrides((
    text-label-text-color: var(--mat-sys-on-secondary-container),
  ));

  background-color: var(--mat-sys-secondary-container);
}

.spacer {
  flex: 1 1 auto;
}

.actions {
  display: flex;
  gap: 8px;
}

// На узких экранах оставляем только иконки
@media (max-width: 768px) {
  .brand span,
  .label {
    display: none;
  }

  .user-button mat-icon[iconPositionEnd] {
    display: none;
  }

  // Без подписи иконка должна стоять по центру кнопки
  .nav a,
  .actions > *,
  .user-button {
    min-width: 48px;
    padding: 0 12px;
  }

  .nav mat-icon,
  .actions mat-icon,
  .user-button mat-icon {
    margin: 0;
  }
}