tr.headings
{
	th
	{
		position: relative;

		cursor: pointer;

		&::before, &::after
		{ // Sorting order indicator.
			transition: height 0.2s ease, background 0.2s ease, top 0.2s ease, bottom 0.2s ease;

			content: "";
			position: absolute;
			top: 0;
			bottom: 0;

			display: block;
			margin: auto;
			box-sizing: border-box;

			background: var(--background-darkest);
		}

		&::before
		{
			right: calc(0.33em - 1px);

			width: 2px;
			height: 0;
			border-radius: 2px;
		}
		&::after
		{
			right: calc(0.33em - 3px);

			width: 6px;
			height: 6px;
			border-radius: 6px;
		}

		&.asc, &.desc
		{
			&::after, &::before
			{
				background: var(--primary);
			}

			&::before
			{
				height: 0.8em;
			}
		}

		&.asc::after
		{
			top: 0.5em;
		}
		&.desc::after
		{
			bottom: 0.5em;
		}
	}
}