.sorting-indicators {
	gap: 2px;

	& .sorting-indicator {
		height: 5px;
		margin: 0;
		position: relative;
		width: 16px;

		&::before {
			align-items: center;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			display: inline-flex;
			height: 100%;
			inset: unset;
			justify-content: center;
			margin-inline-start: 4px;
			opacity: 0.5;
			position: absolute;
			width: 100%;
		}

		&.asc {

			.sorted.asc &::before {
				opacity: 1;
			}

			&::before {

				background-image: url('data:image/svg+xml,<svg width="6" height="4" viewBox="0 0 6 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.342529 2.77891L3.00125 0.5L5.65999 2.77891L5.0092 3.53817L3.00125 1.81708L0.993321 3.53817L0.342529 2.77891Z" fill="%23929292"/></svg>');
			}
		}
		
		&.desc {

			.sorted.desc &::before {
				opacity: 1;
			}

			&::before {

				background-image: url('data:image/svg+xml,<svg width="6" height="4" viewBox="0 0 6 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.65993 1.25926L3.0012 3.53817L0.342468 1.25926L0.993259 0.5L3.0012 2.22109L5.00913 0.500001L5.65993 1.25926Z" fill="%23757575"/></svg>');
			}
		}
	}
}
