@import 'components.scss';

$small-desktop-width: 959px;
$mobile-width: 719px;

$medium-width: 720px;
$large-width: 960px;

// preload stuff
body::after {
	content: '';
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background-image:
		url('/assets/b_wintitle.gif'),
		url('/assets/b_winframe.gif'),
		url('/assets/b_gen.gif'),
		url('/assets/b_genpush.gif'),
		url('/assets/b_btn.gif'),
		url('/assets/b_btnpush.gif');
}

body {
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	padding: 8px;

	font-family: 'IBM Plex Serif', serif;
	cursor: url('/assets/mariopaint_hand_white.cur'), auto;
	background-color: white;
	background-image: url('/assets/coffeebean.gif');

	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto 1fr auto auto;
	grid-template-areas:
		"header"
		"sidebar"
		"main"
		"footer"
		"sidefoot";

	row-gap: 8px;
	column-gap: 8px;

	> header {
		grid-area: header;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: flex-start;

		margin: -8px -8px 0;
		padding: 8px;
		background: linear-gradient(60deg,$rainbow);

		> .mobile-menu {
			flex: 0 0 auto;
			display: none;
			position: relative;
			&::before {
				content: '';
				display: inline-block;

				background-image: url('/assets/menu_icons.png');
				background-repeat: no-repeat;
				background-position: 0px 0px;

				width: 24px;
				height: 24px;
				margin-right: 0.25rem;
				vertical-align: bottom;
			}
			&.open::before {
				background-position: -25px 0px;
			}
		}
		> .site-title {
			display: none;
			font-size: 1.25em;
			text-align: center;
		}
		> .page-title {
			flex: 0 1 auto;
			font-size: 2em;
			font-weight: 700;
			margin: 0 0 0 8px;
			padding-left: 6px;
			border-left: ridge 2px #444;
			border-bottom: none;
			padding-right: 2rem;
			color: inherit;
		}
	}

	> #page-sidebar {
		grid-area: sidebar;

		ul, ol {
			padding-left: 2em;
			ul, ol {
				padding-left: 1em;
			}
		}

		nav {
			@include window();
		}
		details {
			background-color: #ddd;
		}

		width: 360px;
		max-width: calc(100vw - 16px);
		justify-self: center;
	}

	main {
		grid-area: main;
		max-width: 1024px;
		margin: 0px 8px;
	}

	> #page-side-footer {
		grid-area: sidefoot;
		background-color: #ddd;
		padding: 8px 16px;
		margin: -8px;
	}

	> footer {
		@include clearfix();
		grid-area: footer;

		margin: 0 -8px -8px;
		padding: 10px 16px 8px;

		background-color: #ddd;
		position: relative;
		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: linear-gradient(to right, $rainbow);
		}

		.mario {
			float: right;
			width: auto;
			margin-left: 0.25rem;
		}
	}

	@media screen and (min-width: $medium-width) {
		grid-template-columns: 200px 1fr;
		grid-template-rows: auto auto auto 1fr auto;
		grid-template-areas:
			"header   header"
			"sidebar  main"
			"sidefoot main"
			".        main"
			"footer   footer";

		> header {
			> .site-title {
				flex: 0 0 200px;
				display: initial;
			}
		}
		> #page-sidebar {
			width: unset;
			max-width: unset;
			justify-self: stretch;
		}
		> #page-side-footer {
			background: none;
			padding: 0;
			margin: 0;
		}
	}
	@media screen and (min-width: $large-width) {
		grid-template-columns: 300px 1fr;

		> header {
			> .site-title {
				flex: 0 0 300px;
				font-size: 1.5em;
			}
			> .page-title {
				margin-left: 24px;
			}
		}
		main {
			margin: 0px 16px;
		}
	}

	// small only
	@media screen and (max-width: $medium-width - 1px) {
		> header {
			> .mobile-menu { display: inline-block; }
		}
		> #page-sidebar {
			&.mobile:not(.expanded) {
				> *:not(.info-box) { display: none; }
			}
		}
		> footer {
			.mario > img { height: 72px; }
		}
	}
	// medium only
	@media screen and (min-width: $medium-width) and (max-width: $large-width - 1px) {
		> #page-sidebar {
			font-size: $ui-font-size;
		}
	}

	@media print {
		min-height: auto;
		display: block;
		background: none;

		> #page-sidebar { display: none; }
		> footer, > #page-side-footer { background: none; }
		> footer .mario { display: none; }
	}
}

ul, ol {
	margin-left: 0;
	padding-left: 2.5em;
}
ul:not(.tree) {
	list-style-image: url('/assets/bull_diamond_blue.gif');
	$bull-colours: 'magenta', 'red', 'yellow', 'green', 'cyan';
	@for $i from 2 through 6 {
		> li:nth-child(6n + #{$i}) {
			list-style-image: url("/assets/bull_diamond_#{nth($bull-colours, $i - 1)}.gif");
		}
	}
}
ul.tree {
	list-style-image: url('/assets/treearr.gif');
	> li.down {
		list-style-image: url('/assets/treearrd.gif');
		&.in {
			list-style-image: url('/assets/treearrdi.gif');
		}
	}
	> li.in {
		list-style-image: url('/assets/treearri.gif');
	}
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}
h1, h2, h3 {
	padding-left: 6px;
	border-left: ridge 2px;
	border-bottom: ridge 2px;
	overflow: auto; /* prevent borders from overlapping floats */
}
h1 {
	color: #5f51b8;
	border-color: mediumslateblue;
}
h2 {
	color: crimson;
	border-color: #f05c79;
}
h3 {
	border-color: black;
}

h1, :is(article, aside, nav, section) h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.5em;
}
h3, h4, h5, h6 {
	font-size: 1.25em;
}

a[href] {
	cursor: url('/assets/mariopaint_hand_gold.cur'), auto;
	color: #1d39c4;
	&:hover {
		text-decoration-thickness: 2px;
	}
	&:visited { color: #79277e; }

	nav &:visited { color: #1d39c4; }
	nav &.active {
		font-weight: bold;
		font-style: italic;
		color: #061178;
	}
}

details {
	@include window($title-bar: "summary");
	background-color: #fff;
	> summary, &[open] > summary {
		cursor: url('/assets/mariopaint_hand_gold.cur'), auto;
		list-style-type: none;
		// text-align: inherit;
	}
	> summary::-webkit-details-marker { display: none; }
	> summary::before {
		background-image: url('/assets/colarrow.png');
	}
	&[open] > summary::before {
		background-position: right center;
	}
	&:not([open]) {
		border-width: 0px 6px;
		> summary {
			border-image: url('/assets/b_gen.gif') 3 6;
		}
	}
}

.window-box {
	@include window();
	background-color: #fff;
}

progress {
	background-color: #bbb;
	border: solid 1px black;
	height: 14px;

	&::-moz-progress-bar {
		// background: linear-gradient(to bottom, #00669a 0%, #00cdff 25%, #cdffff 50%, #00cdff 75%, #001c38 100%);
		background: linear-gradient(to bottom, #339 0%, #66c 11%, #99f 22%, #ccf 33%, #eee 44%, #ccf 56%, #99f 67%, #66c 78%, #339 89%, #005 100%);
		background-origin: border-box;
		background-clip: border-box;
		border: solid 3px transparent;
		border-bottom-width: 4px;
		border-left-color: #ffffff9a;
		border-right-color: #00001c46;
	}
}

kbd > kbd, kbd.key {
	background-color: #ccc;
	border-color: #ddd;
	border-width: 4px;
	border-style: outset;
	border-image: url('/assets/b_keycap.gif') 4;
	padding: 0px 4px;
}

.info-box {
	@include note-box();

	background-color: #ffffc6;
	display: inline-block;
	width: auto;

	&::before {
		content: ' ';
		white-space: pre;
		width: 16px;
		background: {
			image: url("/assets/msg_info.gif");
			position: left center;
			repeat: no-repeat;
		}
		margin-right: 8px;
		display: inline-block;
	}

	&.error-box {
		background-color: #ffcccc;
		&::before {
			background-image: url("/assets/msg_error.gif");
		}
	}
	&.tip-box {
		&::before {
			background-image: url("/assets/tip.png");
		}
	}
	&.success-box {
		background-color: #c6ffc6;
		&::before {
			background-image: url("/assets/msg_succ.gif");
		}
	}
	&.warning-box {
		&::before {
			background-image: url("/assets/msg_warn.gif");
		}
	}
}

main aside {
	@include note-box();
	float: right;
	margin: 8px 0px 8px 16px;
	padding: 0px;
	background-color: #fff;
	max-width: 300px;

	@media screen and (min-width: $medium-width) and (max-width: $large-width - 1px) {
		font-size: $ui-font-size;
		max-width: 200px;
	}
	@media screen and (max-width: $medium-width - 1px) {
		float: none;
		max-width: max-content;
		margin: auto;
	}

	> .content {
		margin: 8px;
	}
}

img.block {
	display: block;
}
img:not(.no-scale), video:not(.no-scale) {
	max-width: 100%;
}

table {
	border-collapse: collapse;
	border: ridge 2px #bbb;
	th, td {
		border: ridge 2px #bbb;
	}
	th {
		background-color: #ddd;
	}
}

blockquote {
	position: relative;
	margin: 1em 1.5em;
	&::before {
		content: '';
		width: 4px;
		position: absolute;
		left: -1.5em;
		top: 0;
		bottom: 0;
		background: linear-gradient(to top,$rainbow);
	}
}

form:not(.no-style-form) {
	border: {
		width: 4px;
		color: #eee;
		style: outset;
		image: url('/assets/b_winframe2.gif') 4;
	}
	box-shadow: 2px 2px 0px -1px black;
	background-color: #ddd;
	> .form-wrap {
		margin: 8px;
	}
}

.right { float: right; }