/* ══════════════════════════════════════════════════════════════════════
   A fita de rolagem — o desenho

   ── Por que esta folha existe (1.296.0) ───────────────────────────────

   `rolagem.js` e uma peca so, carregada pela LOJA e pelo PAINEL. O
   desenho dela nao era: as tres classes moravam dentro de
   `painel/estilo.css`, porque quando a fita nasceu (1.266.0) so o PDV a
   usava.

   Isso ficou escondido enquanto a loja nao a chamava. No dia em que ela
   chamou, os dois `<div>` que o `ligarFitaDeRolagem` cria nasceriam sem
   regra nenhuma: altura zero, sem cor, sem cursor — uma fita invisivel
   debaixo da faixa, e o defeito voltaria com outra cara. Comportamento
   compartilhado com desenho de uma area so e uma peca pela metade.

   Agora as duas areas leem esta folha. O que e do PDV — o respiro que
   troca de lado, o `padding` da faixa de filtros — fica em
   `painel/estilo.css`, que e de quem e.

   ── Por que desenhada, e nao a barra do navegador ─────────────────────

   A do sistema mede 15px no Windows, flutua e some no Mac, nao existe no
   tablet, e em algumas plataformas e pintada POR CIMA do conteudo da caixa
   — ou seja, por cima do preco dentro do botao.

   E, decisivo: nenhum navegador de ambiente de teste reserva altura para
   ela. Todo valor de `scrollbar-width` mede 0px, com ou sem flags. Uma
   fita do sistema seria entregue sem uma medida, e o padrao aqui e nao
   entregar o que nao foi medido.

   Desenhada, ela e a mesma em toda maquina, acompanha claro/escuro pelos
   tokens, e `testar-fita-de-rolagem.mjs` mede o arraste, o clique e o
   esconder.

   Quem cria os dois elementos, e quem esconde o trilho quando tudo cabe,
   e o `ligarFitaDeRolagem` de `rolagem.js`.
   ══════════════════════════════════════════════════════════════════════ */

/* A caixa que o `ligarFitaDeRolagem` cria em volta da faixa. `min-width:0`
   porque ela costuma ser item de flex, e sem isso um filho que rola empurra
   o pai em vez de rolar dentro dele. */
.fita-caixa{display:flex;flex-direction:column;min-width:0;flex:1}

.fita-trilho{height:8px;margin-top:6px;border-radius:4px;background:var(--veu);
  position:relative;cursor:pointer;touch-action:none}
.fita-trilho[hidden]{display:none}
.fita-polegar{position:absolute;top:0;bottom:0;border-radius:4px;
  background:var(--linha-forte);min-width:32px}
.fita-trilho:hover .fita-polegar{background:var(--texto-3)}
/* Cor de marca durante o arraste: e o unico momento em que a fita e a coisa
   que a pessoa esta segurando. */
.fita-polegar.arrastando{background:var(--marca)}