_filteReddit.scss

body.hideOver18 {
	.thing.over18:not(.allowOver18),
	.search-result.over18:not(.allowOver18) {
		display: none !important;
	}
}

.thing.RESFiltered,
.search-result.RESFiltered {
	// For some reason does the scss linter complain on body:not()
	body.res:not(.res-filters-disabled):not(.res-show-filter-reason) &:not(.res-filterline-highlight-match) {
		&:not(.res-thing-has-visible-child),
		&.res-thing-has-visible-child.collapsed { // seperate line since :not() didn't work with multiple classes
			// !important since many custom stylesheets overrides it otherwise
			display: none !important;
		}

		&.res-thing-has-visible-child:not(.res-selected) {
			> .entry {
				max-height: 60px;
				position: relative; // Make sure that all children are confined
				opacity: .3;
			}

			> .midcol {
				visibility: hidden;
			}
		}
	}

	&.res-filterline-highlight-match > .entry {
		background-color: rgba(255, 155, 155, .16);
	}

	body.res-show-filter-reason & {
		> .entry {
			opacity: .7;
		}

		&::before {
			content: attr(filter-reason);
		}
	}

	.res-filter-remove-entry {
		cursor: pointer;

		&::after {
			content: ' — click here to remove matching filter entry';
		}
	}
}

@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;

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

.res-filteReddit-filterline-pad-until-ready {
	.listing-page .content[role=main] > .spacer:nth-of-type(2)::before {
		@include filterline-basic-layout
		content: ' ';
	}
}

%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 {
	@include filterline-basic-layout

	$c: &;

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

	body:not(.res-filteReddit-show-filterline) & {
		display: none;
	}

	&-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;

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

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

		&-name::before {
			content: attr(name);
		}

		&-hover {
			$v: &;

			&-preamble {
				// Hacky
				width: calc(100% - 36px);
				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;
					}
				}
			}

			&-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: 1 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;
		align-items: center;

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

		.toggleButton {
			transform: scale(.8);
			position: absolute;
			right: 0;
		}
	}

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

		body.res-entry-is-selected &-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;
		}
	}
}