// Define variables for commonly used colors and font sizes
$primary-color: #8dc8f4;
$secondary-color: #7fb3dc;
$link-hover-color: #6ac7da;
$link-active-color: #6ac7da;
$text-color: #afbded;
$background-color: #1e1e2e;

$heading-color: #8cc6f2;
$blockquote-color: #afbded;
$table-header-bg: #afbded;
$table-border-color: #2e2e46;

$font-family: Roboto, Georgia, Palatino, Times, "Times New Roman", Lexend, serif;
$monospace-font: monospace;
$base-font-size: 14px;

// Define mixins for commonly used styles
@mixin heading-styles {
	color: $heading-color;
	line-height: 125%;
	margin-top: 2em;
	font-weight: normal;
}

@mixin media-query($breakpoint) {
	@media only screen and (min-width: $breakpoint) {
		@content;
	}
}

@keyframes bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

// Begin SCSS stylesheet
html {
	font-size: 100%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	color: $text-color;
	font-family: $font-family;
	font-size: $base-font-size;
	line-height: 1.7;
	padding: 1em;
	margin: auto;
	max-width: 42em;
	background: $background-color;

	@include media-query(480px) {
		font-size: 14px;
	}

	@include media-query(768px) {
		font-size: 16px;
	}
}

a {
	color: $primary-color;
	text-decoration: none;

	&:visited {
		color: $secondary-color;
	}

	&:hover {
		color: $link-hover-color;
	}

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

	&:focus {
		outline: thin dotted;
	}

	&::-moz-selection {
		background: rgba($primary-color, 0.3);
		color: $text-color;
	}

	&::selection {
		background: rgba($primary-color, 0.3);
		color: $text-color;
	}

	&::-moz-selection {
		background: rgba($primary-color, 0.3);
		color: $primary-color;
	}

	&::selection {
		background: rgba($primary-color, 0.3);
		color: $primary-color;
	}
}

p {
	margin: 1em 0;
}

img {
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	@include heading-styles;

	h4,
	h5,
	h6 {
		font-weight: bold;
	}

	h1 {
		font-size: 2.5em;
	}

	h2 {
		font-size: 2em;
	}

	h3 {
		font-size: 1.5em;
	}

	h4 {
		font-size: 1.2em;
	}

	h5 {
		font-size: 1em;
	}

	h6 {
		font-size: 0.9em;
	}
}

blockquote {
	color: $blockquote-color;
	margin: 0;
	padding-left: 3em;
	border-left: 0.5em $background-color solid;
}

hr {
	display: block;
	height: 2px;
	border: 0;
	border-top: 1px solid $table-border-color;
	border-bottom: 1px solid $background-color;
	margin: 1em 0;
	padding: 0;
}

pre,
code,
kbd,
samp {
	color: $text-color;
	font-family: $monospace-font;
	_font-family: "courier new", monospace;
	font-size: 0.98em;
}

pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

ins {
	background: $primary-color;
	color: $text-color;
	text-decoration: none;
}

mark {
	background: $primary-color;
	color: $text-color;
	font-style: italic;
	font-weight: bold;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;

	sup {
		top: -0.5em;
	}

	sub {
		bottom: -0.25em;
	}
}

ul,
ol {
	margin: 1em 0;
	padding: 0 0 0 2em;

	ul ul,
	ol ol {
		margin: 0.3em 0;
	}
}

dl {
	margin-bottom: 1em;
}

dt {
	font-weight: bold;
	margin-bottom: 0.8em;
}

dd {
	margin: 0 0 0.8em 2em;

	&:last-child {
		margin-bottom: 0;
	}
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}

figure {
	display: block;
	text-align: center;
	margin: 1em 0;

	img {
		border: none;
		margin: 0 auto;
	}

	figcaption {
		font-size: 0.8em;
		font-style: italic;
		margin: 0 0 0.8em;
	}
}

table {
	margin-bottom: 2em;
	border-bottom: 1px solid $table-border-color;
	border-right: 1px solid $table-border-color;
	border-spacing: 0;
	border-collapse: collapse;

	th {
		padding: 0.2em 1em;
		background-color: $table-header-bg;
		border-top: 1px solid $table-border-color;
		border-left: 1px solid $table-border-color;
	}

	td {
		padding: 0.2em 1em;
		border-top: 1px solid $table-border-color;
		border-left: 1px solid $table-border-color;
		vertical-align: top;
	}
}

.author {
	font-size: 1.2em;
	text-align: center;
}

@media print {
	* {
		background: transparent !important;
		color: $text-color !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	body {
		font-size: 12pt;
		max-width: 100%;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	hr {
		height: 1px;
		border: 0;
		border-bottom: 1px solid $text-color;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid $text-color;
		padding-right: 1em;
		page-break-inside: avoid;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page :left {
		margin: 15mm 20mm 15mm 10mm;
	}

	@page :right {
		margin: 15mm 10mm 15mm 20mm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}

// Sidebar style, contains the ToC with clickable links
.sidebar {
	position: fixed;
	top: 0;
	left: -1000px; // Initially hidden by being yoten offscreen
	height: 100%;
	width: 490px; // Static content width. FIXME: ugh
	background-color: darken($background-color, 2%);
	overflow-x: hidden; // Horizontal scrollbar
	overflow-y: auto; //  Vertical scrollbar if needed
	transition: left 0.3s; // "Smooth" slide animation
	padding: 10px;
	z-index: 1000; // Ensure sidebar is above content
}

.sidebar.show {
	left: 0; // Show sidebar when toggled
	border: 1px solid darken($background-color, 5%);
}

// Togglee sidebar
.toggle-btn {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: lighten($text-color, 2%);
	font-size: 16px;
	transition: left 0.3s;

	&:hover {
		color: lighten($text-color, 4%);
	}
}

.toggle-btn.left {
	left: 20px;
}

.toggle-btn.right {
	left: 520px;
}

// Go back button
.go-back-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background-color: lighten($background-color, 4%);
	color: $text-color;
	border-radius: 10px;
	cursor: pointer;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;

	&:hover {
		color: lighten($background-color, 4%);
		background-color: lighten($background-color, 8%);
	}

	i {
		font-size: 20px;
	}
}