/* Os icones dos botoes e dos rotulos de area e produto.
 *
 * Tudo em `currentColor` e dimensionado por `em`: o icone acompanha a fonte
 * do botao que o contem, entao a mesma folha serve o botao primario do herói
 * e o secundario da faixa de saidas sem variante. */

.ep-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-right: .5em;
  /* O tracado afina junto com a fonte pequena, senao o icone pesa mais que a
   * palavra ao lado. */
  opacity: .82;
}
.ep-icone svg { width: 100%; height: 100%; display: block; }

/* O botao vira caixa flexivel para o icone e o rotulo ficarem no mesmo eixo.
 * `inline-flex` e nao `flex` porque varios desses botoes estao numa linha com
 * outros elementos e `flex` os esticaria. */
button:has(> .ep-icone),
label:has(> .ep-icone) { display: inline-flex; align-items: center; }

button:hover > .ep-icone { opacity: 1; }
button:disabled > .ep-icone { opacity: .45; }

/* ── o icone de area e o de produto, nos rotulos do cabecalho ───────────── */

/* TAMANHO EM PIXEL, e nao em `em` como o dos botoes.
 *
 * Estes dois selos vivem em rotulos de 10 e 11 px. A 1,05em o icone saia com
 * 10,5 px, e a viga com apoio, carga e deformada vira borrao nesse tamanho -
 * o desenho existe para dizer o que o produto e, e nao para ser enfeite.
 * Dezesseis pixels e o piso em que os tres elementos ainda se distinguem. */
.ep-selo-area,
.ep-selo-produto {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.ep-selo-area svg,
.ep-selo-produto svg { width: 100%; height: 100%; display: block; }

/* O selo do produto fica na pastilha do canto, que e clara e pequena. O
 * tracado cheio ali vira borrao, entao ele afina. */
.ep-selo-produto svg { stroke-width: 1.5; }
/* O selo da area acompanha um rotulo em versalete e cinza; o traco cheio
 * chamaria mais que a palavra. */
.ep-selo-area { opacity: .75; }

.site-header .brand small,
.prototype-badge { display: inline-flex; align-items: center; }

/* ── o icone que SUBSTITUI o glifo, nas ferramentas do canvas ──────────────
 *
 * Aqueles botoes sao quadrados, com o rotulo embaixo do simbolo e nao ao
 * lado. O `margin-right` da regra geral empurraria o desenho para a esquerda
 * do quadrado. */
.tool-button { display: inline-flex; flex-direction: column; align-items: center; }
.tool-button > .ep-icone {
  width: 18px;
  height: 18px;
  margin: 0 0 4px;
  opacity: .9;
}
.tool-button.active > .ep-icone { opacity: 1; }

/* As abas do trecho e as do painel de resultado. O icone fica menor que o do
 * botao de acao: aba e navegacao, e o desenho ali orienta sem competir com o
 * rotulo. */
[data-span-panel] > .ep-icone,
[data-result-tab] > .ep-icone,
[data-flow-tool] > .ep-icone,
[data-flow-action] > .ep-icone {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  opacity: .75;
}
[data-span-panel].active > .ep-icone,
[data-result-tab].active > .ep-icone,
[data-flow-action].active > .ep-icone { opacity: 1; }

/* A aba de carga tem o contador depois do rotulo. Sem isto o `inline-flex`
 * do botao cola o numero na palavra. */
[data-span-panel="loads"] > span:not(.ep-icone) { margin-left: 6px; }