---
---

@import 'variables';

@import 'milligram';
@import 'prism';
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

html, body {
	margin: 0;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	min-width: $min-width;
}

* {
	box-sizing: border-box;
}

[src*="tasmota-icon.png"] {
	@media (prefers-color-scheme: dark) {
		filter: invert(1) grayscale(1);
	}
}

pre {
	margin-bottom: ($base-height * 2) !important;
}

a {
	text-decoration: underline;
	color: inherit;


	&:hover {
		color: $link-color;
		text-decoration: underline;
	}
}
a.menu {
	text-decoration: none;
	color: inherit;


	&:hover {
		color: $link-color;
		text-decoration: none;
	}
}

.wrapper {
	height: 100%;
	width: 100%;
	max-height: 100%;
	min-height: 100%;
	display: flex;
	overflow: hidden;
}

// Sidebar
.sidebar {
	display: block;
	width: 20%;
	max-width: $sidebar-width;
	padding: 0;
	border-right: $sidebar-border;
	height: 100%;
	overflow: hidden;
	color: $sidebar-color;

	@media (prefers-color-scheme: dark) {
    color: $sidebar-color-dark-mode;
		border-color: $border-color-dark-mode;
  }

	.sidebar-logo {
		background-color: $navigation-background;

		@media (prefers-color-scheme: dark) {
			background-color: $navigation-background-dark-mode;
			
			img {
				filter: invert(1) grayscale(1);
			}
		}
	}

	.sidebar-main {
		height: 100%;
		background: $navigation-background;
		padding: $base-height;
		overflow: auto;
		padding-bottom: 4em;

		@media (prefers-color-scheme: dark) {
			background-color: $navigation-background-dark-mode;
		}
	}

	.sidebar-mobile {
		display: none;
		height: $header-height;
		padding: $base-height;
		text-align: right;
		border-bottom: 2px solid #e1e1e1;

		@media (prefers-color-scheme: dark) {
			border-color: $border-color-dark-mode;
		}

		.close-icon, .menu-icon {
			width: 18px;
			cursor: pointer;
			height: auto;
			display: none;
		}
	}
}

.search {
	height: $header-height;
	border-bottom: $sidebar-border;
	padding: 0 $base-height;

	@media (prefers-color-scheme: dark) {
    border-color:$border-color-dark-mode;
  }

	.search-input {
		border: none;
		font-size: 0.9em;
		font-weight: 300;
		width: 100%;
		height: 100%;
		color: $content-color;

		@media (prefers-color-scheme: dark) {
			color: $content-color-dark-mode;
		}
	}
}

.navigation {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2rem;

	li {
		margin: 0;
		padding: 5px 2px;
	}

	a {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-decoration: none;

		&.active {
			color: $navigation-link-color;
		}
	}
}

.subnav {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		margin: 0;
		padding: 2px 2px;
	}

	a {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-decoration: none;

		&.active {
			color: $navigation-link-color;
		}
	}
}

// Content
.content {
	display: flex;
  justify-content: center;
	min-height: 100%;
	height: 100%;
  width: 100%;
	overflow-y: auto;
	color: $content-color;
	line-height: 1.7;
	word-wrap: break-word;

	@media (prefers-color-scheme: dark) {
    color: $content-color-dark-mode;
  }
}

.inner {
  width: 100%;
	max-width: $content-width;
	padding: $base-height ($base-height * 2) ($base-height * 3) $base-height;
}

.section {
	margin-bottom: $base-height;
}

/**
* Mobile
*/
@media (max-width: $mobile-width) {
	.wrapper {
		flex-direction: column;
	}

	.sidebar {
		width: 100%;
		max-width: 100%;
		border-right: none;
		height: $header-height;

		.sidebar-main {
			padding-bottom: 8em;
		}

		.sidebar-mobile {
			display: block;

			.menu-icon {
				display: inline;
			}
		}

		&.opened {
			overflow: visible;
			height: auto;
			max-height: 100dvh;
			border-bottom: $sidebar-border;

			.sidebar-mobile {
				background: $navigation-background;

				@media (prefers-color-scheme: dark) {
					background-color: $navigation-background-dark-mode;
				}
			}
		}
	}

	.content {
		width: 100%;
		margin-top: 0;
		height: calc(100% - #{$header-height});
		min-height: calc(100% - #{$header-height});
	}

	.inner {
		padding: $base-height;
	}
}


// Search Results

#search-results {
	margin-top: 10px;
}

#nothing-found {
	display: none;
}

.compat a {
	text-wrap: nowrap;
}
