/**
 * This contains the content styling
 * @author Sascha Leib <sascha@leib.be>
 */
 
 main {
	.outline, .info, .tip, .important, .alert, .help, .download, .todo {
		box-sizing: border-box;
		border: transparent solid 2pt;
		border-left-width: 1.5em;
		padding: 1pt .5em;
		margin: .5em 0;
		position: relative;
	}
	.info::before, .tip::before, .important::before,
	.alert::before, .help::before, .download::before,
	.todo::before {
		content: ' ';
		background: transparent center/1em no-repeat;
		position: absolute;
		width: 1em;
		height: 1em;
		left: -1.25em;
		right: initial;
		top: .1em;
		filter: opacity(90%);
	}
	
	.outline { border: #CCC solid 2pt; }
	.outline.filled { background-color: #EEE; }

	.info { border-color: #CCC; }
	.info::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTExLDlIMTNWN0gxMU0xMiwyMEM3LjU5LDIwIDQsMTYuNDEgNCwxMkM0LDcuNTkgNy41OSw0IDEyLDRDMTYuNDEsNCAyMCw3LjU5IDIwLDEyQzIwLDE2LjQxIDE2LjQxLDIwIDEyLDIwTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyTTExLDE3SDEzVjExSDExVjE3WiIgLz48L3N2Zz4=");}
	.info.filled { background-color: #EEE; }
	
	.tip { border-color: #FFCA28; }
	.tip::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLDExSDIzVjEzSDIwVjExTTEsMTFINFYxM0gxVjExTTEzLDFWNEgxMVYxSDEzTTQuOTIsMy41TDcuMDUsNS42NEw1LjYzLDcuMDVMMy41LDQuOTNMNC45MiwzLjVNMTYuOTUsNS42M0wxOS4wNywzLjVMMjAuNSw0LjkzTDE4LjM3LDcuMDVMMTYuOTUsNS42M00xMiw2QTYsNiAwIDAsMSAxOCwxMkMxOCwxNC4yMiAxNi43OSwxNi4xNiAxNSwxNy4yVjE5QTEsMSAwIDAsMSAxNCwyMEgxMEExLDEgMCAwLDEgOSwxOVYxNy4yQzcuMjEsMTYuMTYgNiwxNC4yMiA2LDEyQTYsNiAwIDAsMSAxMiw2TTE0LDIxVjIyQTEsMSAwIDAsMSAxMywyM0gxMUExLDEgMCAwLDEgMTAsMjJWMjFIMTRNMTEsMThIMTNWMTUuODdDMTQuNzMsMTUuNDMgMTYsMTMuODYgMTYsMTJBNCw0IDAgMCwwIDEyLDhBNCw0IDAgMCwwIDgsMTJDOCwxMy44NiA5LjI3LDE1LjQzIDExLDE1Ljg3VjE4WiIgLz48L3N2Zz4=");}
	.tip.filled { background-color: #FFF9C4; }
	
	.important { border-color: #FF9800; }
	.important::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDJMMSwyMUgyM00xMiw2TDE5LjUzLDE5SDQuNDdNMTEsMTBWMTRIMTNWMTBNMTEsMTZWMThIMTNWMTYiIC8+PC9zdmc+");}
	.important.filled { background-color: #FFE0B2; }

	.alert { border-color: #B71C1C; }
	.alert::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTguMjcsM0wzLDguMjdWMTUuNzNMOC4yNywyMUgxNS43M0MxNy41LDE5LjI0IDIxLDE1LjczIDIxLDE1LjczVjguMjdMMTUuNzMsM005LjEsNUgxNC45TDE5LDkuMVYxNC45TDE0LjksMTlIOS4xTDUsMTQuOVY5LjFNMTEsMTVIMTNWMTdIMTFWMTVNMTEsN0gxM1YxM0gxMVY3IiAvPjwvc3ZnPg==");
	 filter: invert(100%) opacity(90%);}
	.alert.filled { background-color: #FFCDD2; }

	.help { border-color: #7986CB; }
	.help::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTExLDE4SDEzVjE2SDExVjE4TTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyTTEyLDIwQzcuNTksMjAgNCwxNi40MSA0LDEyQzQsNy41OSA3LjU5LDQgMTIsNEMxNi40MSw0IDIwLDcuNTkgMjAsMTJDMjAsMTYuNDEgMTYuNDEsMjAgMTIsMjBNMTIsNkE0LDQgMCAwLDAgOCwxMEgxMEEyLDIgMCAwLDEgMTIsOEEyLDIgMCAwLDEgMTQsMTBDMTQsMTIgMTEsMTEuNzUgMTEsMTVIMTNDMTMsMTIuNzUgMTYsMTIuNSAxNiwxMEE0LDQgMCAwLDAgMTIsNloiIC8+PC9zdmc+");}
	.help.filled { background-color: #E8EAF6; }

	.download { border-color: #66BB6A; }
	.download::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUsMjBIMTlWMThINU0xOSw5SDE1VjNIOVY5SDVMMTIsMTZMMTksOVoiIC8+PC9zdmc+");}
	.download.filled { background-color: #E8F5E9; }
	
	.todo { border-color: #4DD0E1; }
	.todo::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3IDE1TDE4IDE5SDIxVjIySDNWMTlINkw3IDE1SDE3TTE1IDhMMTYgMTJIOEw5IDhIMTVNMTMgMUwxNCA1SDEwTDExIDFIMTNaIiAvPjwvc3ZnPg==");}
	.todo.filled { background-color: #E0F7FA; }
	
	/* notch down the icons for selected block-level elements: */
	div.info::before, div.tip::before, div.important::before, div.alert::before, div.help::before, div.download::before, div.todo::before,
	article.info::before, article.tip::before, article.important::before, article.alert::before, article.help::before, article.download::before, article.todo::before,
	aside.info::before, aside.tip::before, aside.important::before, aside.alert::before, aside.help::before, aside.download::before, aside.todo::before,
	section.info::before, section.tip::before, section.important::before, section.alert::before, section.help::before, section.download::before, section.todo::before,
	figure.info::before, figure.tip::before, figure.important::before, figure.alert::before, figure.help::before, figure.download::before, figure.todo {
		top: .35em;
	}

	/* text colours: */
	.yellow { color: #966C03; }
	.orange { color: #B24103; }
	.brown { color: #3E2723; }
	.red { color: #B71C1C; }
	.purple { color: #4A148C; }
	.indigo { color: #1A237E; }
	.blue { color: #0D47A1; }
	.cyan { color: #006064; }
	.teal { color: #004D40; }
	.green { color: #1B5E20; }
	.grey, .gray { color: #37474F; }
	
	/* special case: markers: */
	mark.yellow { background-color: #FFF176; color: #111; }
	mark.orange { background-color: #FFB74D; color: #111; }
	mark.brown { background-color: #BCAAA4; color: #111; }
	mark.red { background-color: #E57373; color: #111; }
	mark.purple { background-color: #CE93D8; color: #111; }
	mark.indigo { background-color: #9FA8DA; color: #111; }
	mark.blue { background-color: #64B5F6; color: #111; }
	mark.cyan { background-color: #4DD0E1; color: #111; }
	mark.teal { background-color: #4DB6AC; color: #111; }
	mark.green { background-color: #81C784; color: #111; }
	mark.grey, mark.gray { background-color: #B0BEC5; color: #111; }

	/* rounded corners */
	.rounded { border-radius: .5em; }
	
	/* grid-layout classes */
	.grid-2-columns,
	.grid-3-columns,
	.grid-4-columns {
		display: grid;
		grid-gap: 0 .5em;
	}
	.grid-2-columns {
		grid-template-columns: 1fr 1fr;
	}
	.grid-3-columns {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.grid-4-columns {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	/* grid cell classes: */
	.colspan-2 { grid-column-end: span 2; }
	.colspan-3 { grid-column-end: span 3; }
	.colspan-4 { grid-column-end: span 4; }

}

/* RTL Overrides */
[dir=rtl] main .info, main *[dir=rtl] .info, main .info[dir=rtl],
[dir=rtl] main .tip, main *[dir=rtl] .tip, main .tip[dir=rtl],
[dir=rtl] main .important, main *[dir=rtl] .important, main .important[dir=rtl],
[dir=rtl] main .alert, main *[dir=rtl] .alert, main .alert[dir=rtl],
[dir=rtl] main .help, main *[dir=rtl] .help, main .help[dir=rtl],
[dir=rtl] main .download, main *[dir=rtl] .download, main .download[dir=rtl],
[dir=rtl] main .todo, main *[dir=rtl] .todo, main .todo[dir=rtl] {
	border-width: 2pt 1.5em 2pt 2pt;
}
[dir=rtl] main .info::before, main *[dir=rtl] .info::before, main .info[dir=rtl]::before,
[dir=rtl] main .tip::before, main *[dir=rtl] .tip::before, main .tip[dir=rtl]::before,
[dir=rtl] main .important::before, main *[dir=rtl] .important::before, main .important[dir=rtl]::before,
[dir=rtl] main .alert::before, main *[dir=rtl] .alert::before, main .alert[dir=rtl]::before,
[dir=rtl] main .help::before, main *[dir=rtl] .help::before, main .help[dir=rtl]::before,
[dir=rtl] main .download::before, main *[dir=rtl] .download::before, main .download[dir=rtl]::before,
[dir=rtl] main .todo::before, main *[dir=rtl] .todo::before, main .todo[dir=rtl]::before {
	left: initial;
	right: -1.25em;
}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {

	body.darkmode {
		main {
			.outline { border-color: #ADADB3; }
			.info { border-color: #754E00; }
			.tip { border-color: #F9A825; }
			.important { border-color: #943400; }
			.alert { border-color: #A81A1A; }
			.help { border-color: #1A237E; }
			.download { border-color: #1B5E20; }
			.todo { border-color: #006064; }
			
			.outline.filled { background-color: #39393D; }
			.info.filled { background-color: #2F353B; }
			.tip.filled { background-color: #46361e; }
			.important.filled { background-color: #532E1D; }
			.alert.filled { background-color: #482124; }
			.help.filled { background-color: #20233C; }
			.download.filled { background-color: #203125; }
			.todo.filled { background-color: #1A3236; }
			
			.info::before, .alert::before,
			.help::before, .download::before,
			.todo::before { filter: invert(100%) opacity(80%); }

			.tip::before, .important::before { filter: opacity(80%); }

			/* text colours: */
			.yellow { color: #FDD835; }
			.orange { color: #FB8C00; }
			.brown { color: #A5847E; }
			.red { color: #FF4314; }
			.purple { color: #BC6DCA; }
			.indigo { color: #7986CB; }
			.blue { color: #42A5F5; }
			.cyan { color: #00BCD4; }
			.teal { color: #26A69A; }
			.green { color: #43A047; }
			.grey, .gray { color: #78909C; }

			/* special case: markers: */
			mark.yellow { background-color: #754E00; color: #CCC; }
			mark.orange { background-color: #943400; color: #CCC; }
			mark.brown { background-color: #4E342E; color: #CCC; }
			mark.red { background-color: #A81A1A; color: #CCC; }
			mark.purple { background-color: #6A1B9A; color: #CCC; }
			mark.indigo { background-color: #1A237E; color: #CCC; }
			mark.blue { background-color: #0D47A1; color: #CCC; }
			mark.cyan { background-color: #006064; color: #CCC; }
			mark.teal { background-color: #004D40; color: #CCC; }
			mark.green { background-color: #1B5E20; color: #CCC; }
			mark.grey, mark.gray { background-color: #37474F; color: #CCC; }

		}
	}
}

/* layout overrides for narrow screens: */
@media (max-width: 670px) {
	main {
		.grid-2-columns,
		.grid-3-columns {
			grid-template-columns: 100%;
		}
		.grid-4-columns {
			grid-template-columns: 1fr 1fr;
		}
	}
}
@media (max-width: 440px) {
	main {
		.grid-4-columns {
			grid-template-columns: 100%;
		}
	}
}