.table-sort-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: inherit;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .5rem;
  text-align: inherit;
  width: 100%;
}

.table-sort-button::after { content: "↕"; opacity: .55; }
th[aria-sort="ascending"] .table-sort-button::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .table-sort-button::after { content: "↓"; opacity: 1; }
.table-sort-button:hover { background: rgb(127 127 127 / 10%); }
.table-sort-button:focus-visible,
.table-sort-control select:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.table-sort-control { display: none; margin-block: 0 1rem; }
.table-sort-control label { align-items: center; display: flex; gap: .5rem; }
.table-sort-control select {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #767676);
  border-radius: .375rem;
  color: inherit;
  font: inherit;
  min-height: 2.75rem;
  padding: .4rem .75rem;
}
.table-sort-control--always { display: block; }

@media (max-width: 48rem) { .table-sort-control { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .table-sort-button, .table-sort-control select { scroll-behavior: auto; transition: none; }
}