.sortable thead th:not(.no-sort) {
	cursor: pointer
}
.sortable thead th:not(.no-sort)::after,
.sortable thead th:not(.no-sort)::before {
	transition: color .1s ease-in-out;
	font-size: 1.2em;
	color: rgba(0, 0, 0, 0)
}

.sortable thead th:not(.no-sort)::after {
	margin-left: 3px;
	content: "►";
	display: inline-block;
	transform: scale(.5);
	transform-origin: center left;
}

.sortable thead th:not(.no-sort):hover::after {
	color: inherit
}

.sortable thead th:not(.no-sort)[aria-sort=descending]::after {
	color: inherit;
	content: "▼";
	display: inline-block;
	transform: scale(.5);
	transform-origin: center left;
}

.sortable thead th:not(.no-sort)[aria-sort=ascending]::after {
	color: inherit;
	content: "▲";
	display: inline-block;
	transform: scale(.5);
	transform-origin: center left;
}

.sortable thead th:not(.no-sort).indicator-left::after {
	content: ""
}

.sortable thead th:not(.no-sort).indicator-left::before {
	margin-right: 3px;
	content: "▸";
	display: inline-block;
	transform: scale(.5);
	transform-origin: center left;
}

.sortable thead th:not(.no-sort).indicator-left:hover::before {
	color: inherit
}

.sortable thead th:not(.no-sort).indicator-left[aria-sort=descending]::before {
	color: inherit;
	content: "▾";
	display: inline-block;
	transform: scale(.5);
	transform-origin: center left;
}

.sortable thead th:not(.no-sort).indicator-left[aria-sort=ascending]::before {
	color: inherit;
	content: "▴";
	display: inline-block;
	transform: scale(.5);
	transform-origin: center left;
}

/*
.sortable {
	--stripe-color: #e4e4e4;
	--th-color: #fff;
	--th-bg: #808080;
	--td-color: #000;
	--td-on-stripe-color: #000;
	border-spacing: 0
}
*/

.sortable.sticky thead th {
	position: sticky;
	top: 0;
	z-index: 1
}

@media print {
  .sortable thead tr.filter,
  .sortable thead th:not(.no-sort)::after {
    display: none !important;
  }
}

/*

.sortable tbody tr:nth-child(odd) {
	background-color: var(--stripe-color);
	color: var(--td-on-stripe-color)
}

.sortable thead th {
	background: var(--th-bg);
	color: var(--th-color);
	font-weight: normal;
	text-align: left;
	text-transform: capitalize;
	vertical-align: baseline;
	white-space: nowrap
}

.sortable td {
	color: var(--td-color)
}

.sortable td,
.sortable th {
	padding: 10px
}

.sortable td:first-child,
.sortable th:first-child {
	border-top-left-radius: 4px
}

.sortable td:last-child,
.sortable th:last-child {
	border-top-right-radius: 4px
}

*/