$sort-svg: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort" class="svg-inline--fa fa-sort fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"></path></svg>');
$sort-up-svg: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-up" class="svg-inline--fa fa-sort-up fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"></path></svg>');
$sort-down-svg: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-down" class="svg-inline--fa fa-sort-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg>');

.tabelle-arrow {
	& {
		@include visually-hidden();
	}

	:not(:checked) + &--asc::after,
	:checked + &--asc + :not(:checked) + &--desc::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--tabelle-arrow-height, 1.5em);
		z-index: 1;
		cursor: pointer;
	}

	&--desc::before {
		width: 1em;
		height: 1em;
		background-color: var(--tabelle-arrow-color, $tabelle-gray);
		display: block;
		content: ' ';
		mask-image: var(--tabelle-arrow-sort-image, $sort-svg);
		mask-repeat: no-repeat;
		mask-position: center;
	}

	:checked + &--asc + :not(:checked) + &--desc::before {
		mask-image: var(--tabelle-arrow-sort-up-image, $sort-up-svg);
	}

	:not(:checked) + &--asc + :checked + &--desc::before {
		mask-image: var(--tabelle-arrow-sort-down-image, $sort-down-svg);
	}

	:focus + &--asc + :not(:checked) + &--desc::before,
	:focus + &--asc + :checked + &--desc::before {
		mask-image: var(--tabelle-arrow-sort-up-image, $sort-up-svg);
	}

	:not(:checked) + &--asc + :focus + &--desc::before,
	:checked + &--asc + :focus + &--desc::before {
		mask-image: var(--tabelle-arrow-sort-down-image, $sort-down-svg);
	}

	:hover ~ &--desc {
		--tabelle-arrow-color: var(--tabelle-arrow-color-hover, #{$tabelle-light-gray});
	}

	:focus ~ &--desc {
		outline: var(--tabelle-focus-style);
		--tabelle-arrow-color: var(--tabelle-arrow-color-focus, #{$tabelle-light-gray});
	}
	// Remove focus styles for mouse interaction where supported
	:focus:not(:focus-visible) ~ &--desc {
		outline: none;
	}
}

.tabelle-arrows {
	border: 0;
	padding: 0;
	position: relative;

	legend {
		@include visually-hidden();
	}
}