.res-commentNavToggle {
	display: inline-block;
	font-size: 12px;
	margin-left: 8px;
	cursor: pointer;

	&::after {
		content: '»';
		display: inline-block;
		margin-left: 2px;
		transform: rotate(90deg);
	}

	&-choices {
		cursor: initial;
		z-index: 41;
		display: none;
		position: absolute;
		background-color: rgba(255, 255, 255, .9);
		padding: 8px;
		border-radius: 3px;
		box-shadow: rgb(144, 144, 144) 1px 2px 4px;

		&[category=new] {
			color: #9a7d2e;
		}
	}

	&:hover &-choices { display: block; }

	&-type {
		color: grey;
		cursor: pointer;
		font-weight: bold;
		width: 100%;

		&:hover {
			text-decoration: underline;
		}
	}
}

#REScommentNavBox {
	clear: both;
	float: right;
	margin-top: 5px;
	padding: 3px;
	opacity: .3;
	user-select: none;
	transition: opacity .5s ease-in;

	&:focus-within,
	&:hover {
		opacity: 1;
	}

	select {
		width: 60px;
		border: none;

		&:not(:focus) option span {
			display: none;
		}
	}
}

#commentNavButtons {
	text-align: center;
}

#commentNavUp,
#commentNavDown {
	all: unset;
	color: #1278d3;
	cursor: pointer;
	font-size: 35px;
	clip-path: inset(7px 0);
	margin: -7px 0;

	&:focus {
		text-shadow: 0 0 5px #1278d3;
		outline: none;
	}

	&[disabled] {
		opacity: .3;
		cursor: default;
	}
}

#commentNavPostCount {
	color: #1278d3;
}
