@import '../variables';

#prototypopanel {
	height:100%;
	position:relative;
	display:flex;
	flex-direction:column;
	flex: 1;
	min-height: 0;

}

.panel-demo-overlay {
	position:absolute;
	width: 100%;
	height: 100%;
	background-color: transparentize($green, 0.2);
	z-index: 99;

	&-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color:$dark-grey;
		font-size: 20px;
		display: block;
		cursor: default;
		padding: 60px 30px;
		background-color: $white;
		z-index: 999;
		text-align: center;
		width: 760px;
		p {
			padding: 0px 40px;
		}
		&-academy-cta, &-gopro-cta {
			font-size: 20px;
			cursor: pointer;
			background-position: 15px center;
			background-size: 25px 25px;
			background-repeat: no-repeat;
			padding: 15px 15px 15px 50px;
			margin-top: 20px;
			border-radius: 10px;
			text-align: left;
			transition: color 0.5s ease, background-color 0.5s ease;
		}

		&-academy-cta {
			color:$dark-grey;
			background-color: $white;
			background-image: url('../../images/graduate-cap-black.svg');
			float: left;
			border: 3px solid $dark-grey;
			margin-left: auto;

			&:hover {
				color: $white;
				background-color: $dark-grey;
				background-image: url('../../images/graduate-cap-white.svg');
			}
		}

		&-gopro-cta {
			color:$green;
			background-color: $white;
			background-image: url('../../images/pro-version-green.svg');
			border: 3px solid $green;
			margin-right: auto;
			margin-left: auto;
			width: auto;
			display: inline-block;
			&:hover {
				color:$white;
				background-color: $green;
				background-image: url('../../images/pro-version.svg');
			}
		}

		svg {
			position: relative;
			display: block;
			width: 325px;
			height: auto;
			margin: 0 auto;
			margin-bottom: 20px;
			cursor: pointer;
			overflow: visible;

			.st12, .st13, .st14, .st15 {
				transition: transform 0.3s ease-in-out;
				transform: translateY(12px);
			}

			.st0, .st1 {
					transition: transform 0.3s ease-in-out;
					transform-origin: center;
			}

			.st2 {
				transform-origin: center;
				path {
					transform-origin: center;
				}
			}
			&:hover  {
				.st12, .st13, .st14, .st15 {
					transform: translateY(4px);
				}

				.st2 {
					animation: pendulum 8s linear infinite reverse;
					path {
						animation: orbit 6s linear infinite reverse;
					}
				}

				.st0, .st1 {
					transform: scale(1.05);
				}
			}
		}

		@keyframes orbit {
			0% { transform: rotate(0deg) scale(1); }
			33% { transform: rotate(90deg) scale(1.2); }
			66% { transform: rotate(270deg) scale(0.8); }
			100% { transform: rotate(360deg) scale(1);}
		}

		@keyframes pendulum {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
	}
}

#prototypoword {
	flex: 1 1 30%;
	overflow:visible;
	position:relative;
}

#prototypotextandglyph {
	flex: 1 1 70%;
	display:flex;
	flex-direction:row;
	overflow:hidden;
}

#prototyposlidertooltip {
	position: absolute;
	display: block;
	top: 52px;
	right: -228px;
	width: 228px;
	z-index: 4;
	padding: 1em;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: lighten($dark-grey, 5%);
	color: $white;

	&.slider-tooltip-animation {
		&-enter {
			transform: translateX(-200px);
			will-change: transform;

			&#{&}-active {
				transform: translateX(0px);
				transition: transform .3s ease-out;
			}
		}

		&-leave {
			transform: translateX(0px);
			will-change: transform;

			&#{&}-active {
				transform: translateX(-200px);
			transition: transform .3s ease-in;
			}
		}
	}

	.slider-tooltip {

		&-title {
			font-size: 1.3em;
			margin-bottom: 10px;
		}
		&-description {
		}
		&-prev,
		&-next {
			position: absolute;
			top: -25px;
			right: 0;

			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: $dark-grey;
			text-align: center;
			font-size: 1.3em;
			line-height: 1;
			cursor: pointer;

			&:hover {
				background-color: $green;
			}
		}
		&-prev {
			margin-right: 23px;
		}
	}

	img {
		width: 200px;
		height: 150px;
	}

	.close-button {
		position: absolute;
		top: -25px;
		right: -25px;
	}
}

.prototypo-panel-handle {
	position: absolute;
	z-index: 2;
	cursor: row-resize;
	width: 100%;
	height: 10px;

	&.vertical {
		cursor: col-resize;
		width: 10px;
		height: 100%;
	}

	&-bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		background-color: $light-grey;
		transition: all 200ms;
		width: 100%;
		height: 1px;
		z-index: 5;
	}

	&.vertical &-bar {
		width: 1px;
		height: 100%;
	}

	&:hover &-bar, &.dragging &-bar {
		@include themify() {
			background-color: $theme-background;
		}
		width: 100%;
		height: 8px;
	}

	&:hover.vertical &-bar, &.dragging.vertical &-bar {
		width: 8px;
		height: 100%;
	}

}
