/* Cabeçalhos ordenáveis (shared/ordenacao.js). */
th.is-ordenavel {
  padding: 0;
}

.ordenavel {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.ordenavel:hover,
.ordenavel:focus-visible {
  background: rgb(0 0 0 / 5%);
}

.ordenavel:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.ordenavel__seta {
  display: inline-flex;
  flex: none;
  width: 8px;
  height: 8px;
}

.ordenavel__seta svg {
  width: 100%;
  height: 100%;
  transition: transform 150ms ease;
}

.ordenavel__seta path {
  stroke: currentColor;
  opacity: 0.3;
  transition: opacity 150ms ease, stroke 150ms ease;
}

.ordenavel:hover .ordenavel__seta path {
  opacity: 0.55;
}

/* Coluna ordenada: seta forte e verde; no sentido decrescente ela vira para baixo. */
.ordenavel__seta[data-ordem='asc'] path,
.ordenavel__seta[data-ordem='desc'] path {
  stroke: var(--c-primary);
  opacity: 1;
}

.ordenavel__seta[data-ordem='desc'] svg {
  transform: rotate(180deg);
}