.SorterCollection {
	position: absolute;
	bottom: 2px;
	right: calc(2em - 5px);
	display: flex;
}

.SortingTrigger {
	font-size: 80%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	cursor: pointer;
	border: var(--borders);
	background-color: var(--highlightbackground);
	margin-left: 2px;
	width: calc(3ch + 7px);
	visibility: hidden;
}

.SortingTrigger:active {
	filter: brightness(0.95);
}

.SortingTrigger.Unsort {
	background-color: unset;
	border: none;
	font-size: 1em;
	position: relative;
	top: 0.1em;
	width: auto;
}

tr:hover .SortingTrigger.Sort {
	visibility: visible;
}

.SortingSymbol, .UpDown {
	color: var(--textdiscreet);
}

.TripleIcon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	width: 10px;
	height: 10px;
}

.TripleIcon > *{
    height: 2px;
    background-color: var(--textdiscreet);
}
.TripleIcon>:first-child {
    width: 100%;
}

.TripleIcon>:nth-child(2) {
    width: 75%;
}

.TripleIcon>:nth-child(3){
    width: 50%;
}

.UpDown, .TripleIcon {
	display: none;
}

.SortingTrigger.Sort[data-sorting-direction='ascending']>.SortingSymbol,
.SortingTrigger.Sort[data-sorting-direction='descending']>.SortingSymbol {
	visibility: visible;
}

.SortingTrigger.Sort[data-sorting-direction='ascending']>.TripleIcon,
.SortingTrigger.Sort[data-sorting-direction='descending']>.TripleIcon{
	display:flex;
	visibility: visible;
}

tr:hover .SortingTrigger.Sort>.UpDown {
	display: block;
}


tr:hover .SortingTrigger.Sort>.TripleIcon {
	display: none;
}

.SortingTrigger.Sort[data-sorting-direction='ascending']>.TripleIcon {
    flex-direction: column-reverse;
}

/*Reset Sorting */
.SortingTrigger.Unsort[data-sorting-direction='none']
{
	visibility: visible;
}