/*
 * Controles das listas com filtros no endereço (assets/js/ui/filtros.js): trilha de navegação,
 * opção de filtro sem resultado, "Limpar filtros" e a linha de ordenação. As páginas de lista
 * (/pecas, /pcs-prontos, a página do produto) carregam este arquivo; o resto do estilo dos filtros
 * (.filtros, .opcao-filtro, .paginacao) está no site.css desde a fase 1. Só tokens.
 */
@layer site-componentes {
  .trilha {
    font-size: var(--text-sm);
  }

  .trilha__completa {
    display: none;
  }

  .trilha__completa li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .trilha a {
    display: inline-flex;
    align-items: center;
    min-width: var(--target-min);
    min-height: var(--target-min);
  }

  .trilha__completa [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }

  @media (width >= 40rem) {
    .trilha__completa {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 var(--space-2);
    }

    .trilha .trilha__pai {
      display: none;
    }
  }

  .links-inline {
    align-items: center;
  }

  /* A ordem escolhida (aria-current="true", o item atual de um conjunto): a mesma marca do chip
     da página atual do design system. */
  .ui-chip[aria-current="true"] {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    background-color: var(--color-surface-2);
  }

  .opcao-filtro--vazia {
    color: var(--color-fg-muted);
  }

  .link-acao {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
  }

  .paginacao li[aria-hidden="true"] {
    display: flex;
    align-items: center;
    padding-inline: var(--space-1);
  }
}