/***********/
/* GENERAL */
/***********/

html {
	box-sizing: border-box;
	font-size: 16px;
}
*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	padding: 10px 20px;
	font-size: 1rem;
	font-family: sans-serif;
}
body.noscroll {
	overflow: hidden;
}

body > div {
	position: relative;
}
body > div + div {
	margin: 2.5em 0 1em 0;
}

/************/
/* HEADINGS */
/************/

h1 {
	border-bottom: 1px solid #ddd;
	margin: 0.5em 0;
	font-size: 2rem;
}
h2 {
	margin: 0;
	border-bottom: 1px solid #ddd;
	font-size: 1.625rem;
	padding: 0 0 2px 0;
}
h3 {
	font-size: 1.3125rem;
	color: #666;
	border-bottom: 1px dotted #eee;
	margin: 1em 0 0.5em 0;
}

/*************/
/* TEXTAREAS */
/*************/

textarea {
	border: 1px solid #aaa;
	font-family: Inconsolata, Courier, monospace;
	font-size: 1.125rem;
	width: 100%;
	display: block;
	max-height: calc(100vh - 275px);
}
#matchingPatterns textarea {
	min-height: 300px;
}
#exclusionPatterns textarea {
	min-height: 150px;
}

/******************/
/* OTHER CONTROLS */
/******************/

.top-controls {
	text-align: right;
	margin: 0 0 2.5em 0;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	max-width: 750px;
}
.top-controls .buttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 0;
}
button {
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	background-color: transparent;
}
button:active {
	transform: scale(0.95);
}
button:focus:active {
	outline: none;
}
.top-controls button {
	border: 1px solid #bbb;
	color: #fff;
	padding: 10px 16px;
	cursor: default;
	margin: 0 0 0 0.5em;
	background-color: #fff;
}
.top-controls button.save-button {
	background-color: #16e;
	font-size: 1.5rem;
}
.top-controls button.reset-button {
	background-color: #d3453d;
	font-size: 1rem;
}
.top-controls button:disabled {
	background-color: #777;
	opacity: 0.3;
}
.top-controls button:not(:disabled):hover {
	text-shadow:
		0 0 1px #fff,
		0 0 3px #fff,
		0 0 5px #fff;
	cursor: pointer;
}

/******************/
/* MODE SELECTION */
/******************/

input#whitelist-mode {
	display: block;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #000;
	font-size: 1rem;
	height: 2em;
	width: 4em;
	margin: 0 6px;
	background-color: #000;
	box-shadow: 
		-2em 0 0 1px #fff inset,
		0 0 0 3px #fff inset;
}
input#whitelist-mode:checked {
	border: 1px solid #fff;
	background-color: #fff;
	box-shadow: 
		2em 0 0 1px #000 inset,
		0 0 0 3px #000 inset;
}
input#whitelist-mode,
.mode-select-container span {
	cursor: pointer;
}
.mode-select-container {
	white-space: nowrap;
	display: flex;
	align-items: center;
	align-self: flex-start;
	border: 1px solid #ddd;
	padding: 8px 10px;
	cursor: default;
	background-color: #fff;
}
.mode-select-container.whitelist {
	background-color: #000;
	color: #fff;
}
.mode-select-container:not(.whitelist) .blacklist-mode-label,
.mode-select-container.whitelist .whitelist-mode-label {
	border-bottom: 1px dotted currentColor;
}
.mode-select-container span::selection {
	background-color: transparent;
}
.mode-select-container span.disabled {
	pointer-events: none;
}
.mode-select-container span:not(.disabled):hover {
	border-bottom: 1px solid currentColor;
}

/******************/
/* WHITELIST MODE */
/******************/

#matchingPatterns.disabled h2 {
	color: rgba(0,0,0,0.15);
}
#matchingPatterns.disabled p {
	opacity: 0.2;
}
#matchingPatterns.disabled .textarea-container {
	position: relative;
}
#matchingPatterns.disabled .textarea-container::before {
	content: ".*";
	display: flex;
	position: absolute;
	background-color: rgba(232,232,232,0.9);
	width: 100%;
	height: 100%;
	z-index: 1;
	justify-content: center;
	align-items: center;
	font-family: Inconsolata, Courier, monospace;
	font-size: 4em;
}

/***************/
/* BOTTOM INFO */
/***************/

.bottom-info {
	font-size: 0.875rem;
	color: #aaa;
	text-align: center;
	margin: 1em 0;
	line-height: 1.6;
}
.bottom-info p {
	margin: 0;
}

/****************/
/* HELP OVERLAY */
/****************/

.open-help-button-container {
	position: absolute;
	top: 0;
	right: 0;
}

.help-overlay {
	position: fixed;
	background-color: #ffe;
	top: 10px;
	left: 10px;
	margin: 0;
	border: 1px solid #777;
	box-shadow:
		1px 1px 4px 0 #aaa;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	line-height: 1.4;
	padding: 36px 0 6px 0;
}
#help {
	visibility: hidden;
}
#help:target {
	visibility: visible;
}
.help-container {
	height: 100%;
	padding: 0 16px;
	overflow-y: scroll;
}
.help-container::-webkit-scrollbar {
	background-color: transparent;
	width: 15px;
}
.help-container::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
	box-shadow: 0 0 0 3px #ffe inset;
}
.help-container::-webkit-scrollbar-thumb:hover {
	background-color: #888;
}

.help-overlay h1 {
	margin: 0 0 0.5em 0;
	line-height: 1;
	padding: 0 0 4px 0;
}

.help-overlay .close-button,
.open-help-button-container .open-help-button {
	display: block;
	cursor: pointer;
	color: #999;
	white-space: nowrap;
}
.help-overlay .close-button:hover,
.open-help-button-container .open-help-button:hover {
	color: #000;
}
.help-overlay .close-button::before,
.open-help-button-container .open-help-button::before {
	font-family: Font Awesome;
	padding: 4px;
	display: inline-block;
}

.help-overlay .close-button {
	font-size: 0.875rem;
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 12px;
}
.help-overlay .close-button::before {
	content: "\F00D";
	font-weight: 300;
	font-size: 1rem;
	position: relative;
	top: 1px;
}

.open-help-button-container .open-help-button {
	font-size: 1.125rem;
	padding: 8px 12px 10px 10px;
}
.open-help-button-container .open-help-button::before {
	content: "\F059";
	font-weight: 900;
	font-size: 1rem;
}

.help-overlay hr {
	border-color: #ddd;
	border-style: dotted;
	border-width: 1px 0 0 0;
	height: 0;
	max-width: 200px;
}

/********/
/* MISC */
/********/

code {
	font-family: Inconsolata, monospace;
}
.fa {
	font-family: Font Awesome;
}
.fa-light {
	font-weight: 300;
}
.fa-normal {
	font-weight: 400;
}
.fa-heavy {
	font-weight: 900;
}
p.note {
	font-size: 0.875em;
}