@import "../buttons";

$background: #23282d;

.sf-guided-tour {
	display: block;
	background-color: rgba(35, 40, 45, 0.95);
	border-radius: 5px;
	box-shadow: 3px 1px 5px -2px rgba(0, 0, 0, 0.145);
	color: #a4a4a4;
	font-size: 1.1em;
	z-index: 999999998;
	text-align: left;
	box-sizing: border-box;

	position: fixed;
	left: 5px;
	width: 360px;

	transition-duration: 250ms;
	transition-property: opacity;
	transition-timing-function: ease-in-out;

	opacity: 0;

	&::before {
		content: "";
		position: absolute;
		top: 30px;
		left: -14px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 14px 14px 14px 0;
		border-color: transparent $background transparent transparent;
		border-right-color: rgba(35, 40, 45, 0.95);
	}

	.sf-guided-tour-step {
		padding: 30px;
		overflow: hidden;

		p {
			font-size: 1em;
			line-height: 1.7;
		}

		h2 {
			margin-top: 0;
			font-size: 1.1em;
			font-weight: 500;
			color: #fff;
		}

		.sf-guided-tour-skip {
			margin-left: 10px;
			color: #00aadc;

			&:hover {
				opacity: 0.75;
			}
		}
	}

	&:not(.sf-first-step) {

		.sf-guided-tour-step {

			a.sf-nux-button {
				display: none;
			}

			.sf-guided-tour-skip {
				display: block;
				float: right;
			}
		}
	}

	&.sf-inside-section {

		.sf-guided-tour-step {

			a.sf-nux-button {
				display: inline-block;
			}

			.sf-guided-tour-skip {
				display: none;
			}
		}
	}

	&.sf-last-step {

		.sf-guided-tour-step {

			a.sf-nux-button {
				display: inline-block;
			}
		}
	}
}

a.sf-nux-button {
	vertical-align: middle;

	&:active {
		vertical-align: middle;
	}
}

.sf-loaded {
	opacity: 1;
}

.sf-moving {
	transition-duration: 250ms;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.84, 0.45, 0.68, 1.44);
}

.sf-entering,
.sf-exiting {

	.sf-guided-tour {
		animation-duration: 0.3s;
		animation-timing-function: ease-in-out;
		-webkit-animation-duration: 0.3s;
		-webkit-animation-timing-function: ease-in-out;
	}
}

.sf-entering {

	.sf-guided-tour {
		animation-name: bounceInLeft;
		-webkit-animation-name: bounceInLeft;
	}
}

.sf-exiting {

	.sf-guided-tour {
		animation-name: bounceOutRight;
		-webkit-animation-name: bounceOutRight;
	}
}

@-webkit-keyframes bounceInLeft {

	from {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}

	to {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@keyframes bounceInLeft {

	from {
		opacity: 0;
		transform: translateX(100%);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes bounceOutRight {

	to {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
}

@keyframes bounceOutRight {

	to {
		opacity: 0;
		transform: translateX(100%);
	}
}
