body.hideOver18 {
	.over18:not(.allowOver18) {
		display: none !important;
	}
}

.res-thing-filter-unprocessed {
	// Let the first thing be rendered (but invisible) so that the sidebar flows properly
	opacity: 0 !important;
	~ * { display: none !important; }
}

html:not(.res-filters-disabled, .res-display-match-reason) {
	.res-thing-filter-hide {
		&:not(.res-thing-partial),
		&.res-thing-partial.res-thing-hide-children,
		&.res-thing-hide-children > .child {
			// !important since many custom stylesheets overrides it otherwise
			display: none !important;
		}

		&.res-thing-partial:not(.res-selected) {
			> .entry {
				max-height: 60px;
				overflow: hidden !important;
				position: relative; // Make sure that all children are confined
				opacity: .3;
			}

			> .midcol {
				visibility: hidden;
			}
		}
	}
}

.res-thing-placeholder-message {
	color: rgb(170, 170, 170);
	cursor: pointer;

	.comment & {
		line-height: 2;
	}

	.res-icon {
		font-size: inherit;
	}
}

.res-thing-filterline-highlight {
	background-color: rgba(255, 155, 155, .16);
}

.res-thing-has-placeholder {
	&.link {
		a.title,
		.expando-button,
		.expando {
			display: none !important;
		}

		.thumbnail {
			visibility: hidden !important;
		}
	}

	&.comment > .entry {
		.md {
			display: none !important;
		}
	}

	&.search-result {
		a.search-title,
		.search-expando,
		.search-expando-button,
		.search-result-footer {
			display: none !important;
		}
	}
}

.res-thing-filter-remove-matching-entry {
	cursor: pointer;
}

@mixin filterline-basic-layout {
	position: relative;
	display: flex;
	z-index: 40;
	min-height: 16px;
	margin-bottom: 1px;
	background-color: rgba(255, 255, 255, .9);
	clear: left;

	&[hidden] {
		display: none;
	}

	body.comments-page & {
		margin-left: 10px;
	}
}

%res-filterline-icon {
	display: inline-block;
	transform: rotate(180deg);
	font-family: 'Batch';
	content: '\F051';
}

.res-toggle-filterline-visibility a::before {
	@extend %res-filterline-icon;
}

.res-filterline {
	$c: &;

	@include filterline-basic-layout;

	font: normal 12px sans-serif, arial;
	color: gray;

	&-preamble::before {
		@extend %res-filterline-icon;

		margin: 0 2px;
	}

	&-filters {
		width: 100%;
	}

	&-filter {
		display: inline-block;
		cursor: pointer;
		margin: 0 3px;
		border-bottom: 1px solid #efefef;
		padding-bottom: 1px;

		&::before {
			content: attr(text);
		}

		&:hover { border-bottom: 1px solid #bfbfbf; }

		&-disabled { display: none; }

		&-hiding,
		&-hiding:hover {
			border-bottom: 2px solid greenyellow;
			padding-bottom: 0;
			color: black;
		}

		&-hover {
			$v: &;

			&-preamble {
				height: 100%;
				display: flex;
				margin-top: -7px;
				justify-content: space-between;
				align-items: center;

				> span {
					text-overflow: ellipsis;
					overflow: hidden;
				}

				#{$v}-group {
					margin: unset;
					height: 22px;

					#{$v}-button {
						width: max-content;
					}
				}
			}

			&-options {
				float: right;
			}

			&-group {
				margin-top: 2px;
			}

			&-buttons {
				display: flex;
			}

			&-button {
				width: 100%;
				margin: 1px;
				line-height: 12px;
				padding: 3px 4px;
				font-size: 12px;
				.res-nightmode & { padding: 5px 4px; } // Compensate for smaller nightmode button
			}

			&-notice {
				margin-bottom: 5px;

				&::before {
					content: 'Note:';
					font-weight: bold;
					margin-right: 1ch;
				}

				&:empty {
					display: none;
				}
			}
		}
	}

	&-toggle-powered {
		all: unset;
		cursor: pointer;
		float: right;
		color: darkred;
		&:checked { color: hsla(120, 100%, 20%, .5); }

		&::after {
			display: inline-block;
			line-height: 1em;
			padding: 1px;
			width: 1em;
			height: 1em;
			font-family: Batch;
			content: '\F069';
			background: hsla(0, 0%, 50%, .06);
			border-radius: 100%;
		}
	}

	&-dropdown {
		display: none;
		position: absolute;
		width: 165px;
		padding: 2px 0;
		background-color: #f7f7f7;
		border-radius: 0 2px 2px 2px;
		box-shadow: #e8e8e8 2px 2px 4px;

		#{$c}-preamble:hover & { display: block; }

		details {
			padding: 1px 0 2px 0;

			summary {
				margin-left: 3px;
				cursor: pointer;
				outline: none;
				user-select: none;
			}
		}

		&-other {
			margin: 2px 4px;
			line-height: 16px;
			word-break: break-all;
		}

		&-action {
			cursor: pointer;
			margin: 1px 3px;
			margin-left: 16px;
			border-bottom: 1px solid #fafafa;
			padding-bottom: 1px;
			display: flex;
			align-items: center;

			&:hover { border-bottom: 1px solid #bfbfbf; }

			&::before {
				content: '\00a0';
				text-align: center;
				margin-left: -17.5px;
				width: 17px;
			}
		}

		&-toggles {
			label {
				padding: 3px 2px;
				display: inline-flex;
				align-items: center;

				input {
					min-width: 15px;
					margin: 0 3px;
				}
			}
		}
	}

	&-external-filter {
		line-height: 18px;
		display: flex;
		cursor: default;

		> div:first-child {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.gearIcon {
			margin: 0 4px 0 0;
			cursor: pointer;
		}

		.toggleButton {
			transform: scale(.8);
			margin-right: -4px;
			margin-left: auto;
		}
	}

	&-filter-new {
		&::before {
			content: '+';
			font-weight: bold;
		}

		&-from-selected {
			margin-left: auto;
			padding-left: 3px;

			&::after {
				content: '=';
				font-weight: bold;
				color: #73adad;
			}

			&:hover::after {
				color: lightblue;
			}
		}
	}

	&-show-help {
		text-align: center;
		padding: 4px;
		cursor: pointer;

		&::before {
			content: '\2139';
			margin-right: 3px;
		}
	}
}
