// Partials ============================================================
@import "reset";
@import "colors";
@import "functions";

// Variables ===========================================================
$mobile: 35em;
$tablet: 60em;
$desktop: 80em;

$black: #111;
$white: #fff;

$black-code-light: #4d4d4c;
$white-code-light: #ffffff;
$gray-code-light: shade(#8e908c, 20%);
$red-code-light: #c82829;
$orange-code-light: shade(#f5871f, 10%);
$yellow-code-light: shade(#eab700, 15%);
$green-code-light: #718c00;
$blue-code-light: #4271ae;
$purple-code-light: #8959a8;
$aqua-code-light: #3e999f;

$black-code-dark: #1d1f21;
$white-code-dark: #c5c8c6;
$gray-code-dark: #969896;
$red-code-dark: #cc6666;
$orange-code-dark: #de935f;
$yellow-code-dark: #f0c674;
$green-code-dark: #b5bd68;
$blue-code-dark: #81a2be;
$purple-code-dark: #b294bb;
$aqua-code-dark: #8abeb7;

$radius: 0.5rem;
$transition: 0.2s;
$degrees: 30deg;

// Mixins ==============================================================
@mixin z-color($color) {
	color: $color;

	.z-layer:not(:first-child) {
		color: shade($color, 25%);
	}
}

@mixin button($color) {
	border-color: $color;
	box-shadow: 0 0 0 0 rgba($color, 0.25);

	strong {
		color: $color;
	}

	&:hover {
		box-shadow: 0 0 0 0.5em rgba($color, 0.25);
		color: shade($color, 25%);
		text-decoration: none;
	}
}

// Animation ===========================================================
@keyframes wobble {
	0%,
	100% {
		transform: rotate3d(-1, 1, 0, $degrees);
	}
	25% {
		transform: rotate3d(1, 1, 0, $degrees);
	}
	50% {
		transform: rotate3d(1, -1, 0, $degrees);
	}
	75% {
		transform: rotate3d(-1, -1, 0, $degrees);
	}
}

// Base ================================================================
body {
	font: 100%/1.5 "Nunito", "Helvetica Neue", sans-serif;
	text-align: center;
	background-color: $white;
	background-image: linear-gradient(
			90deg,
			rgba($white, 0),
			$white 25%,
			$white 75%,
			rgba($white, 0)
		),
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			transparent 2.5em,
			$blue-gray-100 0,
			$blue-gray-100 calc(2.5em + 1px)
		),
		repeating-linear-gradient(
			45deg,
			transparent 0,
			transparent 2.5em,
			$blue-gray-100 0,
			$blue-gray-100 calc(2.5em + 1px)
		);
}

main {
	text-align: left;
}

// Structural Styles ===================================================
.container {
	padding: 1.5em;
}

.wrapper {
	max-width: $tablet;
	margin: 0 auto;
}

.split {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.split-item {
	flex: 1 0 15em;

	&.collapse {
		flex: 0 1;
	}

	&.shrink {
		flex: 0 1 15em;
	}
}

// Typography ==========================================================
h1,
h2,
h3,
p {
	margin: 0 0 1rem;
}

h1 {
	font-size: 3em;
	font-weight: 800;
	line-height: 1;

	&.x-large {
		font-size: 10em;
	}

	&.large {
		font-size: 8em;
	}

	&.medium {
		font-size: 4em;
	}

	&.small {
		font-size: 3em;
	}
}

h2 {
	font-size: 2em;
	font-weight: 400;
}

h3 {
	font-size: 1.2em;
	font-weight: 600;
}

a {
	text-decoration: none;
	color: $blue-600;

	&:hover {
		text-decoration: underline;
	}

	&.external {
		&:after {
			content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 0 16 16' width='10' height='10'%3E%3Cpath d='M 3 1 L 11 1 L 11 9 M 11 1 L 1 11' fill='none' stroke='%231e88e5' stroke-linecap='round' stroke-width='1.5' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
			opacity: 0.75;
		}
	}
}

ul,
ol {
	margin: 1em 2em;
}

.new {
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.75em;
	padding: 0.1em 0.5em;
	background: rgba($yellow-code-dark, 0.5);
	vertical-align: top;
	font-weight: 500;
	border-radius: 1em;
	margin-left: 0.25em;
	cursor: default;
}

// Outline buttons =====================================================
.button {
	display: inline-block;
	font-size: 1em;
	padding: 0.5em 1em;
	margin: 0 0 0.5em;
	border: 1px solid;
	background: $white;
	border-radius: $radius;
	color: $black;
	overflow: hidden;
	transition: box-shadow $transition, border-color $transition;
	user-select: none;

	strong {
		font-size: 1.25em;
	}

	.split-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1 0 auto;
		align-items: center;

		&:nth-child(2) {
			border-left: 1px solid $green;
			padding-left: 1em;
		}
	}
}

// Code Samples ========================================================
code,
pre {
	border-radius: $radius;

	&.light {
		border: 1px solid $blue-gray-100;
	}
}

pre {
	position: relative;
	font: 100%/1.4 Monaco, monospace;
	padding: 1rem;
	white-space: pre-wrap;
	word-break: break-word;
	overflow: hidden;

	h3 {
		display: inline-block;
		font: inherit;
		float: right;
		opacity: 0.5;
		user-select: none;
		pointer-events: none;
		margin: 0;
	}

	code {
		font: 80%/1.4 Monaco, monospace;
		padding: 0;

		@media (min-width: $tablet) {
			font-size: 90%;
		}
	}

	.pre-subdivision {
		position: relative;
	}
}

code {
	font-size: 1.2em;
	line-height: 1.3;
	padding: 0 0.25em;
	border-radius: $radius / 2;

	&.is-on {
		animation: copier 2s;

		@keyframes copier {
			0% {
				filter: brightness(5);
				background: $black-code-dark;
			}
			100% {
				background: rgba($black-code-dark, 0);
			}
		}
	}

	p & {
		display: inline-block;
	}

	hr {
		margin: 1em -1.25em;
		border: 0;
		border-top: 1px solid $black-code-light;
	}
}

.dot {
	width: 0.75em;
	height: 0.75em;
	display: inline-block;
	border-radius: 25%;
	vertical-align: middle;
	margin-left: 0.25em;
	pointer-events: none;
	user-select: none;
}

.light {
	background: $white-code-light;
	color: $black-code-light;

	.gray-code {
		color: $gray-code-light;
	}
	.red-code {
		color: $red-code-light;
	}
	.orange-code {
		color: $orange-code-light;
	}
	.yellow-code {
		color: $yellow-code-light;
	}
	.green-code {
		color: $green-code-light;
	}
	.blue-code {
		color: $blue-code-light;
	}
	.purple-code {
		color: $purple-code-light;
	}
	.aqua-code {
		color: $aqua-code-light;
	}
}

.dark {
	background: $black-code-dark;
	color: $white-code-dark;

	::selection {
		background: $gray-code-dark;
	}

	.gray-code {
		color: $gray-code-dark;
	}
	.red-code {
		color: $red-code-dark;
	}
	.orange-code {
		color: $orange-code-dark;
	}
	.yellow-code {
		color: $yellow-code-dark;
	}
	.green-code {
		color: $green-code-dark;
	}
	.blue-code {
		color: $blue-code-dark;
	}
	.purple-code {
		color: $purple-code-dark;
	}
	.aqua-code {
		color: $aqua-code-dark;
	}
}

.code-preview {
	cursor: text;

	&:hover {
		text-decoration: none;
	}

	pre {
		font-size: smaller;
		max-height: 12rem;
		user-select: none;
		pointer-events: none;

		&:after {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: red;
			height: 50%;
			content: "";
			background: linear-gradient(
				rgba($black-code-dark, 0),
				$black-code-dark 90%
			);
		}
	}
}

// Github Boxes ========================================================
@import "github";

// Menu ================================================================
.menu {
	display: block;
	margin: 0.5em 0 0;
	user-select: none;
	white-space: nowrap;

	&.right-align {
		text-align: right;
	}
}

.codepen-form {
	display: inline-block;
	vertical-align: top;
}

.codepen-button,
.copy-button {
	display: inline-flex;
	align-items: center;
	line-height: 1.25em;
	border: 0;
	padding: 0.5em 0.75em;
	border-radius: $radius * 0.5;
	cursor: pointer;
	color: $white;
	transition: opacity $transition;
	background: rgba($blue-gray, 0.25);
	opacity: 0.5;
	margin: 0 0.5em 0 0;
	transition: opacity $transition;

	.right-align & {
		margin: 0 0 0 0.5em;
	}

	.options & {
		color: $black;
	}

	&:hover,
	&:focus {
		text-decoration: underline;
		opacity: 1;
	}

	&:active {
		opacity: 1;
	}

	&:before {
		display: inline-block;
		content: "";
		width: 1em;
		height: 1em;
		margin: 0 0.5em 0 0;
		background-size: cover;
	}
}

.copy-button {
	&.is-on {
		animation: copier 2s;
	}

	&:before {
		background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"%3E%3Cpath d="M6 3L6 9L1 9L1 3 ZM4 3L4 1L9 1L9 7L6 7" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"%3E%3C/path%3E%3C/svg%3E');
	}

	.options & {
		&:before {
			background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"%3E%3Cpath d="M6 3L6 9L1 9L1 3 ZM4 3L4 1L9 1L9 7L6 7" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"%3E%3C/path%3E%3C/svg%3E');
		}
	}
}

.codepen-button {
	&:before {
		background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="20 0 26 26" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24"/%3E%3C/svg%3E%0A');
	}

	.options & {
		&:before {
			background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="20 0 26 26" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24"/%3E%3C/svg%3E%0A');
		}
	}
}

// Previews ============================================================
.preview {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex: 1 0 12em;
	min-height: 12em;
	overflow: hidden;
	padding: 0 1em;
	margin: 1rem 0;
	background: $blue-gray-50;
	border-radius: $radius;

	&.vertical {
		flex-direction: column;
		padding: 1em 0;
	}

	h1 {
		position: relative;
		margin: 0;
	}

	h3 {
		position: absolute;
		top: 1rem;
		right: 1rem;
		opacity: 0.25;
	}
}

// Header ==============================================================
.header {
	touch-action: none;

	h1 {
		white-space: nowrap;
		display: inline;
		font-size: 20vw;

		@media (min-width: $mobile) {
			font-size: 8em;
		}
		@media (min-width: $tablet) {
			font-size: 12em;
		}

		&:nth-child(1) {
			@include z-color($amber);
		}
		&:nth-child(2) {
			@include z-color($light-green);
		}
		&:nth-child(3) {
			@include z-color($light-blue);
		}
		&:nth-child(4) {
			@include z-color($red);
		}
		&:nth-child(5) {
			@include z-color($indigo);
		}
		&:nth-child(6) {
			@include z-color($blue-gray);
		}
		&:nth-child(7) {
			@include z-color($teal);
		}
		&:nth-child(8) {
			@include z-color($orange);
		}
	}

	h2 {
		font-size: 1.25em;
		margin: 1em 0;
	}

	.z-text {
		transform: rotateX(20deg);
	}
}

.share {
	display: inline-block;
	vertical-align: top;
	margin: 0 5px;
}

// Download ============================================================
.download {
	.button {
		@include button($blue);
	}

	p {
		margin: 0;
	}
}

// Tips ================================================================
.tip-jar-wrapper {
	display: inline-block;
	width: 10rem;
	float: left;
	margin: 0 1em 1em 0;
}

.tip-jar {
	display: flex;
	align-items: center;
	border: 1px solid $blue;
	font-size: 1.5em;
	padding: 0.25em 0.5em;
	border-radius: $radius;
	color: $blue-gray-300;
	background: $white;
	box-shadow: 0 0 0 0rem rgba($blue, 0.25);
	transition: box-shadow $transition;

	&:hover {
		box-shadow: 0 0 0 0.25rem rgba($blue, 0.25);
		color: $blue;
	}

	&:focus-within {
		box-shadow: 0 0 0 0.25rem rgba($blue, 0.5);
	}

	.tip {
		width: 100%;
		border: 0;
		font: inherit;
		text-align: right;

		&:focus {
			outline: 0;
		}
	}
}

::placeholder {
	color: $blue-gray-300;
}

.tip-button {
	display: flex;
	align-items: center;
	padding: 0.5em 0.75em;
	border-radius: $radius;
	margin: 0.5em 0 0;
	font-weight: bold;
	border: 1px solid $blue;
	color: $blue;
	box-shadow: 0 0 0 0rem rgba($blue, 0.25);
	cursor: pointer;
	transition: background-color $transition, box-shadow $transition;

	&:hover {
		box-shadow: 0 0 0 0.25rem rgba($blue, 0.25);
		text-decoration: none;
		background: rgba($blue, 0.125);
	}

	&:active {
		box-shadow: 0 0 0 0.25rem rgba($blue, 0.5);
		transition: 0s;
	}

	img {
		max-height: 1.25em;
		flex: 1;
		margin: 0 0.75em 0 0;
		border-right: 1px solid rgba($black, 0.25);
		padding: 0 0.75em 0 0;
	}
}

// Initialization ======================================================
.initialization {
	.split {
		align-items: flex-start;
	}
}

.html-init {
	pre {
		margin: 0 0 1em;
	}

	pre.light {
		font-size: 0.85em;
	}

	.preview {
		pointer-events: none;
		user-select: none;
		min-width: 12em;
		padding: 3em 0;
		margin: 0 0 1em;

		.z-text {
			animation: wobble 12s ease-in-out infinite;
			transform: rotateY($degrees);

			.z-layer {
				@mixin debugger($color) {
					color: $color;
					outline: 1px dashed $gray;
				}

				&:nth-child(1) {
					@include debugger($amber);
				}
				&:nth-child(2) {
					@include debugger($green);
				}
				&:nth-child(3) {
					@include debugger($indigo);
				}
			}

			&:before {
				position: absolute;
				top: -50%;
				right: -50%;
				width: 100%;
				height: 100%;
				content: "";
				border-left: 2px solid $green;
				border-bottom: 2px solid $red;
			}
			&:after {
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: calc(50% - 1px);
				height: 100%;
				background: $light-blue;
				width: 2px;
				transform-origin: center top;
				transform: rotateX(90deg);
			}
		}
	}
}

// Styling =============================================================
.styling-example-primary {
	.z-text {
		/* Tip: Apply CSS transforms here */
		/* rotateX() == up/down */
		/* rotateY() == left/right */
		transform: rotateX(15deg) rotateY(-30deg);
		font-family: "Georgia", serif;
	}

	[data-z],
	.z-layer:first-child {
		color: #90a4ae;
	}

	.z-layer {
		color: #455a64;
	}
}

// .styling-example-alternating {
// 	.z-text {
// 		transform: rotateX(-15deg) rotateY(-15deg);
// 	}

// 	.z-layer:nth-child(odd) {
// 		color: $red;
// 	}
// 	.z-layer:nth-child(even) {
// 		color: $blue;
// 	}
// }

// .styling-example-tricolor {
// 	.z-text {
// 		transform: rotateX(-15deg) rotateY(-15deg);
// 	}

// 	.z-layer:first-child {
// 		color: $blue;
// 	}
// 	.z-layer:nth-child(2) {
// 		color: $white;
// 	}
// 	.z-layer:nth-child(3) {
// 		color: $red;
// 	}
// }

// Styling =============================================================
.more {
	.toggle-menu {
		overflow: hidden;
		margin-bottom: -0.5em;
		padding-bottom: 0.5em;
	}
	.toggle {
		-webkit-tap-highlight-color: transparent;

		font: 100%/1 Nunito, sans-serif;
		display: inline-block;
		border-radius: $radius;
		background: $blue-gray-100;
		color: $blue-gray-800;
		border: 0;
		padding: 0.75em 1em;
		cursor: pointer;
		position: relative;
		margin: 0 0 0.5em 0.5em;

		&:hover {
			background: $blue-gray-200;
			color: $black-code-dark;
		}

		&:active {
			background: $blue-gray-400;
		}

		&:focus {
			outline: 0;
		}

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

		&.is-on {
			background: $black-code-dark;
			color: $white-code-dark;
			margin-bottom: 0;
			padding: 0.75em 1em 1.25em;
			border-radius: $radius $radius 0 0;

			&:before,
			&:after {
				display: block;
				content: "";
				position: absolute;
				bottom: 0;
				width: $radius * 4;
				height: $radius * 4;
				border-radius: $radius * 2;
				background: transparent;
			}

			&:before {
				right: 100%;
				box-shadow: $radius * 2 $radius * 2 $black-code-dark;
			}

			&:after {
				left: 100%;
				box-shadow: -$radius * 2 $radius * 2 $black-code-dark;
			}
		}
	}

	pre {
		margin: 0 0 0.25em;
	}

	.tab {
		display: none;

		&.is-on {
			display: block;
		}
	}

	.preview {
		display: flex;
		flex-wrap: wrap;
		padding: 2.75em 1em 1em;
		align-self: flex-start;
	}

	.pause {
		border: 0;
		background: transparent;
		position: absolute;
		top: $radius;
		right: $radius;
		cursor: default;
		pointer-events: none;
		border: 0;
		color: $gray;
		padding: 0.75em 1em;
		border-radius: $radius;

		&:before {
			width: 1em;
			height: 1em * 1.2;
			content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="12" preserveAspectRatio="none" viewBox="0 0 10 10"%3E%3Cpath d="M.5 .5 3.5 .5 L 3.5 9.5 L .5 9.5 Z M 6.5 .5 L 9.5 .5 L 9.5 9.5 L 6.5 9.5 Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"%3E%3C/path%3E%3C/svg%3E');
			margin-right: 0.5em;
			opacity: 0.25;
		}

		&.is-on {
			pointer-events: auto;
			cursor: pointer;
			color: $gray-700;

			&:hover {
				background: $blue-gray-100;
			}

			&:before {
				opacity: 0.5;
			}
		}
	}

	.z-layer {
		filter: brightness(0.7);

		&:first-child {
			filter: brightness(1);
		}
	}

	.svg-code-example,
	.img-code-example,
	.emoji-code-example {
		flex: 1 0 6em;

		.z-text {
			animation: wobble 6s ease-in-out paused infinite;
		}

		&.is-on {
			.z-text {
				animation-play-state: running;
			}
		}
	}

	.svg-code-example {
		svg {
			width: 100%;
			height: auto;
		}

		.z-text {
			animation-delay: -1s;
		}
	}

	.img-code-example {
		img {
			width: 100%;
			padding: 0.5em;
			height: auto;
		}

		.z-text {
			animation-delay: -2s;
		}
	}

	.emoji-code-example {
		text-align: center;
		flex: 1 0 100%;
		font-size: 5em;
		line-height: 1.2;
		letter-spacing: 0.2em;
		padding: 0.2em 0;

		.z-text {
			animation-delay: -0.5s;
		}
	}
}

// Options =============================================================
.options {
	.split {
		align-items: center;

		p:last-child {
			margin: 0;
		}
	}

	.split-item {
		.option {
			margin: 1.5em 0;
		}
	}

	.z-text {
		transform: rotateX($degrees) rotateY($degrees);
		transition: transform 1s;
	}

	.preview {
		align-self: stretch;
		padding: 1.5em;
		margin: 0;

		&:hover {
			.z-text {
				transform: rotateX(-$degrees) rotateY(-$degrees);
			}
		}
	}

	.static {
		touch-action: none;

		.z-text {
			transform: none;
		}

		&:hover .z-text {
			transform: none;
		}
	}
}

.depth-option {
	.preview {
		@include z-color($amber);
	}
}

.layers-option {
	.preview {
		@include z-color($teal);
	}
}

.perspective-option {
	.preview {
		@include z-color($orange);
	}
}

.fade-option {
	.preview {
		@include z-color($light-blue);
	}
}

.direction-option {
	.preview {
		@include z-color($yellow-600);
	}

	.z-text {
		background: rgba($blue-gray, 0.5);
		padding: 0 0.5em;
		border-radius: 0.25rem;
	}

	[data-z-direction="backwards"] .z-layer:first-child {
		transform: translateZ(-1px) !important;
	}
}

.event-option {
	.preview {
		@include z-color($light-green);
	}
}

.event-rotation-option {
	.preview {
		@include z-color($deep-orange-400);
	}
}

.event-direction-option {
	.preview {
		@include z-color($indigo-400);
	}
}

.param {
	font-weight: 400;
	opacity: 0.7;

	&:before {
		content: " : ";
	}
}
