.sortHeader {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	background: none;
	border: none;
	padding: 0 var(--s-1);
	margin-inline: calc(-1 * var(--s-1));
	border-radius: var(--radius-field);
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-transform: inherit;
	transition: background-color 0.15s;

	&:hover,
	&:focus-visible {
		background-color: var(--color-bg-high);
	}

	&:focus-visible {
		outline: var(--focus-ring);
	}
}

.sortIcon {
	width: 0.85rem;
	height: 0.85rem;
}

.sortIconInactive {
	opacity: 0.4;
}