.table-sortable th[data-sortable] {
  padding: 0;
}

.table-sortable th[data-sortable] .table-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  height: 100%;
  min-height: calc(var(--spacing) * 10);
  padding: 0 calc(var(--spacing) * 2);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.table-sortable th[data-sortable] .table-sort-trigger:hover {
  color: var(--color-foreground);
  background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
}

.table-sortable th[data-sortable] .table-sort-icon {
  flex-shrink: 0;
  color: var(--color-muted-foreground);
  transition: color 120ms ease;
}

.table-sortable th[aria-sort="ascending"] .table-sort-icon,
.table-sortable th[aria-sort="descending"] .table-sort-icon {
  color: var(--color-foreground);
}

.table-sortable th[data-sortable] .table-sort-trigger:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}