@import "mixins";
@import "prism";

$prefix: neutron;
$z-index: 99999;

@import "page";
@import "loader";

body.#{$prefix}-off-canvas {
	@include prefix(transition, left 0.5s ease-out);
	left: 0;
	position: relative;

	&--active {
		left: $menuWidth;
	}

	&--overflow {
		overflow-x: hidden;
	}
}

##{$prefix} {
	z-index: $z-index;

	*:not(.#{$prefix}-code--list > *) {
		font-size: 14px;
		font-family: Arial, sans-serif;
	}

	pre {
		border: none;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.#{$prefix}-sticky-nav {
		position: fixed;
		top: 0;
		left: $menuWidth * -1;
		height: 100%;
		width: 0px;
		z-index: $z-index;

		@include prefix(transition, left 0.5s ease-out);

		&.active {
			left: 0;

			.#{$prefix}-button--start {
				left: $menuWidth;
			}
		}
	}

	.#{$prefix}-code-frame,
	.#{$prefix}-menu {
		z-index: $z-index;

		* {
			@include prefix(box-sizing, border-box);
		}

		a,
		p,
		label,
		h1, h2, h3, h4, h5, h6 {
			font-family: Arial, sans-serif;
		}

		h1 { font-size: 1.75em; }
		h2 { font-size: 1.4em; }
		h3 { font-size: 1.2em; }
		h4 { font-size: 1.15em; }
		h5 { font-size: 1.05em; }
		h6 { font-size: 1em; }

		a {
			text-decoration: none;
		}
	}

	.#{$prefix}-button--start {
		position: fixed;
		bottom: 0;
		left: 0;
		width: $buttonSize;
		height: $buttonSize;
		color: $txtcolor;
		text-align: center;
		background-color: $bgcolor;
		z-index: $z-index;
		text-decoration: none !important;

		opacity: 0.5;
		@include prefix(transition, "bottom 0.5s ease-out, left 0.5s ease-out, opacity 0.5s ease-out");

		&.active {
			@include prefix(opacity, 1);
		}

		.#{$prefix}-svg-icon {
			fill: $txtcolor;
		}

		&.#{$prefix}-frame-active {
			bottom: calc(50%);
		}
	}

	.#{$prefix}-navigation {
		padding: 2px 5px;
		width: 100%;

		a {
			display: inline-block;
			width: $buttonSize;
			height: $buttonSize;
			background-color: $bgcolor;
			text-align: center;
			margin-left: 2px;
			text-decoration: none !important;
			color: $txtcolor;
			outline: none;

			.#{$prefix}-svg-icon {
				fill: $txtcolor;
			}

			&:first-child {
				margin-left: 0;
			}

			&.disabled {
				cursor: default;
				.#{$prefix}-svg-icon {
					fill: $disabled-svg-fill;
				}
			}

			&:focus {
				.#{$prefix}-svg-icon {
					fill: $link-color;
				}
			}
		}
	}

	.#{$prefix}-button--start,
	.#{$prefix}-navigation a {
		line-height: 37px;

		span {
			display: none;
		}

		svg {
			width: 16px;
		}

		&.active {
			.#{$prefix}-svg-icon {
				fill: $active-navigation;
			}
		}
	}

	.#{$prefix}-menu {
		position: relative;
		width: $menuWidth;
		top: 0;
		height: 100%;
		background-color: $bgcolor;
		margin: 0;
		color: $txtcolor;
		padding-bottom: $buttonSize + 3px;
		border-right: 2px solid $menu-border;

		@include prefix(transition, "height 0.5s ease-out, left 0.5s ease-out");
		@include prefix(box-sizing, border-box);

		&.active {
			left: 0;
		}

		&.#{$prefix}-frame-active {
			height: calc(50%);
		}
	}

	.#{$prefix}-menu--items {
		margin: 0;
		padding: 10px 0 0 10px !important;
		overflow: auto;
		height: calc(100%);

		ul {
			display: none;
		}

		li {
			padding-left: 15px;
			position: relative;

			label {
				display: inline-block;
				cursor: pointer;
				position: relative;
				margin: 0 0 5px 0 !important;
				font-weight: bold;
				line-height: 1.4;
			}

			a {
				display: block;
				color: $link-color;
				padding-bottom: 5px;
			}

			a::before {
				content: "\25A0";
				position: absolute;
				top: 0;
				left: 0;
				color: $txtcolor;
				line-height: 1.1;
				opacity: 0.3;
			}

			a[class]::before {
				opacity: 0.5;
			}

			&.current {
				a::before {
					opacity: 1;
				}
			}

			.#{$prefix}-in-progress::before {
				color: $status-in-progress;
			}

			.#{$prefix}-done::before {
				color: $status-done;
			}

			.#{$prefix}-deprecated::before {
				color: $status-deprecated;
			}
		}

		[data-item] > label {
			color: $txtcolor;
			text-transform: uppercase;
		}

		input[type=checkbox] {
			display: inline-block;
			width: 0;
			height: 0;
			opacity: 0;

			& + label::before, {
				box-sizing: border-box;
				display: inline-block;
				position: absolute;
				left: -17px;
				top: 3px;
				content: "\2795";
				width: 12px;
				height: 12px;
				border-radius: 3px;
				font-weight: normal;
				line-height: 13px;
				text-align: center;
				font-size: 8px;
				color: $bgcolor;
				background-color: $txtcolor;
			}

			&:checked {
				& ~ ul {
					display: block;
				}

				& + label::before, {
					content: '\2796';
				}
			}

			&:focus {
				& + label {
					color: $link-color;
				}
			}
		}
	}

	.#{$prefix}-menu--search {
		position: absolute;
		top: -$buttonSize * 2;
		left: 0;
		z-index: $z-index + 7;
		width: 100%;
		@include prefix(transition, top 0.5s ease-out);

		&__input {
			position: relative;
			background-color: $bgcolor;
			padding: 5px;
			@include prefix(box-sizing, border-box);

			input {
				border-radius: 0;
				-webkit-appearance: none;
				border: none;
				height: 33px;
				color: $input-text-color;
				width: 100%;
				padding-right: $buttonSize;
				@include prefix(transition, width 0.5s ease-out);
				outline: none;
				padding: 4px;
			}
		}

		&__clear {
			position: absolute;
			right: 10px;
			top: 11px;
			color: $bgcolor;
		}

		&__opened {
			top: 0;
		}
	}

	.#{$prefix}-settings {
		z-index: $z-index + 7;
		width: 100%;
		@include prefix(transition, top 0.5s ease-out);


		input[type=radio] {
			position: relative;
			top: 1px;
			left: 2px;
			outline: none;
		}
	}

	.#{$prefix}-code-frame {
		position: fixed;
		left: 0;
		bottom: -50%;
		width: 100%;
		height: 50%;
		background: $code-frame-bg;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 20px;
		z-index: $z-index;
		color: $code-frame-color;
		@include prefix(transition, bottom 0.5s ease-out);
		@include prefix(box-sizing, border-box);

		&.active {
			bottom: 0;
		}

		&--patterns {
			font-size: 0.85em;
			a {
				color: $dependencies-list-color;
			}

			p a {
				text-decoration: underline;
			}

			##{$prefix}-status {
				margin-top: -10px;

				span {
					text-transform: uppercase;
					font-size: 0.8em;
					padding: 2px;
					background-color: $tab;
					color: $documentation-bg-color;;

					&.#{$prefix}-in-progress {
						background-color: $status-in-progress;
					}

					&.#{$prefix}-done {
						background-color: $status-done;
					}

					&.#{$prefix}-deprecated {
						background-color: $status-deprecated;
					}
				}
			}
		}

		.#{$prefix}-code {
			&--nav {
				@include clearfix;
				margin: 0;
				padding: 0;

			}

			&--item {
				display: block;
				float: left;
				background-color: $tab;
				margin-left: 2px;

				&:first-child {
					border-top-right-radius: 0;
					border-top-left-radius: 4px;
					margin-left: 0;
				}

				&:last-child {
					border-top-right-radius: 4px;
				}

				&.active {
					background-color: $tab-active;
					a {
						color: $tab-color;
					}
				}

				a {
					display: block;
					width: 100%;
					height: 100%;
					padding: 10px;
					color: $tab-color;
					text-decoration: none;
					font-weight: bold;
				}
			}

			&--list {
				padding: 0;
				margin: 0;

				li {
					overflow: auto;

					a {
						color: $documentation-link-color;
						text-decoration: underline;
					}

					pre {
						font-size: 14px;
						line-height: 1;
					}
				}
			}

			&--documentation {
				padding: 1em;
				background-color: $documentation-bg-color;
				color: $documentation-color;
				border-radius: 0.3em;
				border-top-left-radius: 0;
				font-family: $documentation-font;
				text-align: left;
				word-spacing: normal;
				word-break: normal;
				word-wrap: normal;
				line-height: 1.5;

				h1 {
					border-bottom: 1px solid $documentation-color-bold;
				}

				h1, h2, h3, h4, h5, h6 {
					color: rgba($documentation-color, 0.5);
				}

				strong {
					color: $documentation-color-bold;
				}

				em {
					color: rgba($documentation-color, 0.75);
					text-decoration: underline;
				}

				blockquote {
					color: $documentation-color-block;
					background-color: rgba($documentation-color-block, 0.1);
					padding: 10px;

					p {
						margin: 0;
					}
				}
			}
		}
	}

	.#{$prefix}-lightbox {
		font-family: Arial, sans-serif;
		z-index: $z-index + 10;

		&--content {
			position: fixed;
			top: -999px;
			left: 50%;
			width: 600px;
			height: auto;
			margin: -150px 0 0 -300px;
			background-color: $bgcolor;
			padding: 10px;
			@include prefix(transition, top 1s ease-out);
			z-index: $z-index + 11;
			@include prefix(box-sizing, border-box);
			color: $txtcolor;

			a {
				color: $txtcolor;
			}

			&__headline,
			&__text {
				color: $txtcolor;
				font-family: Arial, sans-serif;
			}

			&__headline {
				font-size: 24px;
				line-height: 1;
				margin-bottom: 12px;
			}

			&__text {
				font-size: 16px;
				line-height: 1;
				margin-bottom: 8px;
			}

		}

		&:after {
			position: fixed;
			top: -999px;
			left: 0;
			display: block;
			content: " ";
			width: 0;
			height: 0;
			background-color: $lightbox-overlay-bg;
			z-index: $z-index + 9;
			@include prefix(transition, opacity 1s ease-out);
			opacity: 0;
		}

		&.active {
			&:after {
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 1;
			}

			.#{$prefix}-lightbox--content {
				top: 40%;
				@media (max-width: 600px) {
					left: 0;
					margin-left: 0;
					width: 100%;
				}
			}
		}
	}

	.#{$prefix}-qr-code-frame {
		#qrcode {
			background-color: white;
			padding: 5px;
			text-align: center;
			width: 276px;
			height: 276px;
			margin: 0 auto;

			img {
				margin: 0 auto;
			}
		}
	}

	.#{$prefix}-button--close__link {
		position: absolute;
		top: 0;
		right: 0;
		width: $buttonSize;
		height: $buttonSize;
		background-color: $txtcolor;
		color: $bgcolor;
		text-align: center;
		line-height: 40px;

		span {
			display: none;
		}

		svg {
			width: 20px;
			height: 20px;

			.#{$prefix}-svg-icon {
				fill: $bgcolor;
			}
		}

	}
}