/** Theming **/

:root {
	--background-color: #ffffff;
	--outline-color: #cccccc;
	--primary-background-color: #f1f1f1;
	--primary-foreground-color: #cccccc;
	--secondary-foreground-color: #f0f0f0;

	--primary-text-color: #000000;
	--primary-link-color: var(--primary-text-color);
}

figure.dialog-box[data-dialog-level] {
	--warning-color: #ed751a;
	--success-color: #50fc17;
}

figure.dialog-box[data-dialog-level][data-dialog-dimmed] {
	--warning-color: #b06831;
	--success-color: #20590c;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #15171a;
		--outline-color: #525252;
		--primary-background-color: #161617;
		--primary-foreground-color: #272729;
		--secondary-foreground-color: #2e2e30;

		--primary-text-color: #ffffff;
		--primary-link-color: var(--primary-text-color);
	}

	figure.dialog-box[data-dialog-level] {
		--warning-color: #ed751a;
		--success-color: #0c9e02;
	}

	figure.dialog-box[data-dialog-level][data-dialog-dimmed] {
		--warning-color: #b06831;
		--success-color: #064002;
	}
}

/** Generic **/

* {
	background-color: var(--background-color);
	color: var(--primary-text-color);
}

header {
	text-align: center;
}

pre {
	white-space: pre-wrap;
	overflow: scroll;
	overflow-wrap: anywhere;
}

details {
	border: 1px solid;
	border-radius: 8px;
	padding: 8px;
	margin-top: 4px;
}

.emoji-text {
	line-height: 1.1em;
}

/** Generic forms **/

form {
	display: grid;
	padding: 16px;
}

textarea {
	padding: 16px;
	border-radius: 8px;
}

input[type='submit'] {
	margin-top: 8px;
	padding: 8px;
	border-radius: 8px;
}

input[type='file'] {
	display: none;
}

label.file-upload {
	padding: 6px 12px;
	cursor: pointer;
	background-color: var(--outline-color);
	display: inline-block;
	border-radius: 8px;
}

/** Tabs
 * CSS largely based on: https://www.w3schools.com/howto/howto_js_tabs.asp
 **/

div.tab-container[data-tab-vertical] {
	display: inline-flex;
	width: 100%;
	border: 1px solid var(--outline-color);
}

div.tab-container[data-tab-vertical] > div:nth-of-type(2) {
	width: 100%;
	height: 100%;
}

div.tab-opener-group {
	overflow: hidden;
	border: 1px solid var(--outline-color);
	background-color: var(--primary-background-color);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

div.tab-opener-group[data-tab-vertical] {
	width: 20%;
}

div.tab-opener-group button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
}

div.tab-opener-group[data-tab-vertical] button {
	width: 100%;
}

div.tab-opener-group button.right {
	float: right;
}

div[data-tab-label][data-tab-active] {
	display: block;
}

div[data-tab-label]:not([data-tab-active]) {
	display: none;
}

div.tab-opener-group button:hover {
	background-color: var(--secondary-foreground-color);
}

div.tab-opener-group button[data-active] {
	background-color: var(--secondary-foreground-color);
}

div[data-tab-label]:not([data-tab-vertical]) {
	padding: 6px 12px;
	border: 1px solid var(--outline-color);
	border-top: none;
}

div.tab-container[data-tab-vertical] div[data-tab-label] {
	border: none;
}

div[data-tab-label][data-tab-vertical] {
}

/** Dialogs **/
figure.dialog-box {
	border: 1px solid var(--outline-color);
	padding: 8px;
	border-radius: 8px;
	background-color: var(--secondary-foreground-color);
}

figure.dialog-box p {
	background-color: transparent;
}

figure.dialog-box:not([data-dialog-level]) {
	display: none;
}

figure.dialog-box figcaption {
	border-bottom: 1px solid var(--outline-color);
	padding: 4px 6px;
	border-radius: 4px;
	transition: 1s;
}

figure.dialog-box[data-dialog-level='warning'] figcaption {
	background-color: var(--warning-color);
}

figure.dialog-box[data-dialog-level='success'] figcaption {
	background-color: var(--success-color);
}

/** Footer **/

footer ul.links {
	list-style: none;
}

footer ul.links li {
	display: inline;
	padding: 8px;
}

footer ul.links li a {
	color: var(--primary-link-color);
	text-decoration: none;
	cursor: pointer;
}

footer ul.links li a:visited {
	color: var(--primary-link-color);
}

/** ** Mobile responsiveness ** **/

/** Tabs **/
@media only screen and (max-width: 608px) and (min-width: 480px) {
	div.tab-opener-group[data-tab-vertical] button {
		padding: 0;
	}
}

@media only screen and (max-width: 512px) {
	div.tab-opener-group button.right {
		float: inherit;
	}
}

@media only screen and (max-width: 480px) {
	div.tab-opener-group[data-tab-vertical] {
		width: 100%;
	}

	div.tab-container[data-tab-vertical] {
		display: block;
	}

	div.tab-opener-group button {
		display: block;
		width: 100%;
		padding: 6px 16px;
		border-bottom: 1px solid var(--outline-color);
	}

	div.tab-opener-group button:last-of-type {
		border-bottom: none;
	}
}

@media screen {
	[data-print-only] {
		display: none;
	}
}

@media print {
	div.tab-opener-group {
		display: none;
	}

	div[data-tab-label] {
		border: none !important;
	}

	div.tab-container {
		border: none !important;
		display: block !important;
	}

	footer .links {
		display: none;
	}
}