/* Sortable table column indicators */

.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover {
  color: var(--pk-gray-700);
}

.sort-icon {
  opacity: 0.4;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  margin-left: 4px;
  font-size: var(--text-micro);
  /* Reserve the glyph slot before the icon font arrives so the header's
     content width cannot change when the bootstrap-icons woff2 swaps in. */
  display: inline-block;
  width: 1em;
  text-align: center;
}

.sortable:hover .sort-icon {
  opacity: 0.7;
}

.sortable.sorted .sort-icon {
  opacity: 1;
  color: var(--pk-orange);
}

.sorted {
  background: var(--table-sorted-tint);
}