@import "compass/css3/transition";
@import "compass/css3/transform";
@import "../../../../_common/scss/main";

@mixin center-center() {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

dcom-tutorial {
	* {
		box-sizing: border-box;
	}

	.selected {
		z-index: 1003;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.tut-wrapper {
		position: absolute;
		z-index: 1001;
		pointer-events: none;
	}

	.tut-marker {
		width: 40px;
		height: 40px;
		opacity: 1;
		pointer-events: auto;
		@include center-center();
		@include transition(opacity 0.5s);

		&.hide {
			opacity: 0;
		}

		.pulse {
			width: 40px;
			height: 40px;
			position: relative;
			cursor: pointer;

			.outline,
			.circle {
				width: 24px;
				height: 24px;
				animation-duration: 1.5s;
				animation-iteration-count: infinite;
				animation-timing-function: ease-in-out;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -12px;
				margin-top: -12px;
			}

			.outline {
				border-radius: 20px;
				border: 1px solid $primary-text-color-contrast;
				z-index: 2;
				animation-name: scale-outline;
			}

			.circle {
				background: rgba($primary-text-color-contrast, 0.3);
				border-radius: 50%;
				z-index: 1;
				animation-name: scale-circle;
			}

			&.dark {
				.outline {
					border-color: $primary-color;
				}

				.circle {
					background: rgba($primary-color, 0.3);
				}
			}

			@keyframes scale-outline {
				0% { transform: scale(1); opacity: 1; }
				10% { transform: scale(0.9); }
				20% { transform: scale(1);}
				30% { transform: scale(0.9); }
				60% { opacity: 1;}
				100% { transform: scale(2); opacity: 0; }
			}

			@keyframes scale-circle {
				0% { transform: scale(1); }
				10% { transform: scale(0.9); }
				20% { transform: scale(1); }
				30% { transform: scale(0.9); }
				50% { transform: scale(1); }
				100% { transform: scale(1); }
			}
		}
	}

	.tut-modal {
		position: absolute;
		top: 0;
		color: $primary-text-color-contrast;
		width: 90%;
		max-width: 500px;
		padding: 10px;
		text-align: center;
		pointer-events: auto;
		font-family: 'Gloria Hallelujah';
		left: 50%;
		margin-top: 20px;
		@include transform(translate(-50%, 0));

		&.middle {
			left: 50%;
			@include transform(translate(-50%, 0));
		}

		&.left {
			@include transform(translate(-15%, 0));

			&:after {
				left: 15%;
			}
		}

		&.right {
			@include transform(translate(-85%, 0));

			&:after {
				left: auto;
				right: 15%;
				@include transform(scaleX(-1));
			}
		}

		.title {
			font-size: 20px;
			line-height: 26px;
			padding-bottom: 10px;
		}

		.content {
			font-size: 18px;
			line-height: 24px;
			padding-bottom: 20px;
		}

		 .dcom-button {
			background: none;
			border: 1px solid $primary-text-color-contrast;
			font-size: 18px;
		}
	}

	.tut-modal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1002;

		& > div {
			position: absolute;
			background: rgba(#000000, 0.8);
		}

		.top {
			top: 0;
			left: 0;
			width: 100%;
		}

		.left {
			left: 0;
		}

		.right {
			right: 0;
		}

		.bottom {
			left: 0;
			width: 100%;
		}
	}
}