@import "../variables";

.onboarding-app {
	height: 100%;
	width: 100%;
	background-color: $green;
	overflow: auto;
	padding-top: 80px;

	.onboarding-wrapper {
		width: calc(100% - 160px);
		position: relative;
		margin: 0 auto 50px;
		background-color: $white;
        border-radius: 8px;

		.onboarding-content {			
			padding: 60px 120px;
			padding-bottom: 65px;
			flex-grow:1;

			h3 {
				color: $dark-grey;
				font-size: 28px;
				&.step-title-finish {
					font-size: 68px;
					font-weight: normal;
				}
			}

			.description {
				font-size: 16px;
				color: $medium-grey;
				line-height: 1.375em;
			}

		}


        .backToApp {
			padding: 10px 30px;
			font-size: 12px;
			float: right;
			border-radius: 22px;
			display: inline-block;
			margin: 20px 20px 20px 10px;
		}

		.skip {
			padding: 10px 0px 2px 0px;
			font-size: 12px;
			float: right;
			border-radius: 0;
			box-shadow: none;
			border-bottom: 2px solid #7e7e7e;
			display: inline-block;
			margin: 20px 5px 20px 0px;
			&:hover {
				background-color: transparent;
				color: #7a7a7a;
			}
		}

        .nextStep {
            margin-top: 50px;
            margin-bottom: 40px;
            margin-left: auto;
            margin-right: auto;
			display: block;
			border-radius: 28px;
			font-size: 15px;
			padding: 8px 40px;
        }
		.step {
			.text {
				text-align: center;
				font-size: 8vw;
				line-height: 0.5;
				margin: 0;
                color: $light-grey;
				transition: color .3s ease;
				p{
					margin: 0;
				}
				.highlighted {
					color: $dark-grey;
				}
				padding: 0.7em 0;
			}
			&.step-start {
				img {
					width: 40%;
					height: auto;
					margin-bottom: 50px;
				}
				h3 {
					text-align: center;
				}
				.description {
					max-width: inherit;
					text-align: center;
					margin-bottom: 20px;
				}
			}

			&.step-start-second {
				width: 40%;
				margin: 0 30%;
				.description {
					text-align: center;
				}
				input {
					width: 100%;
					background: transparent;
					box-shadow: none;
					outline: none;
					padding: 10px 20px;
					margin-top: 5px;
					margin-bottom: 5px;
					border: 1px solid $light-grey;
					font-size: 28px;
					&:focus {
							outline: none;
					}
				}
				.create {
					float: right;
				}
				h3 {
					font-size: 14px;
				}
			}

			&.step-finish {
				img {
					width: 90%;
					max-width: 750px;
					height: auto;
					margin-bottom: 50px;
					margin: 0 auto;
					display: block;
				}
			}
			
			.step-sliders {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				flex-wrap: wrap;
				align-items: flex-start;
				align-content: center;
				.onboarding-slider {
					width: 250px;

					label {
						display: block;
						text-transform: uppercase;
					}

					&-controller {
						border: 1px solid $light-grey;
					}
					.slider-controller-bg {
						height: 1.5rem;
					}
					.slider-controller-handle {
						height: 1.5rem;
						width: 1.5rem;
					}
				}
            }
            .alternate-row {
                display: flex;
				flex-direction: row;
				justify-content: space-around;
				flex-wrap: wrap;
				align-items: flex-start;
                align-content: center;
				margin-bottom: 1em;
                .alternate-choice {
					border-radius: 10px;
					border: 3px solid $white;
					background-color: $white;
					flex-grow: 1;
					margin: 0 8px;
					padding: 5px 20px;
					font-size: 68px;
					cursor: pointer;

					-webkit-box-shadow:inset 0px 0px 0px 1px $white;
				    -moz-box-shadow:inset 0px 0px 0px 1px $white;
				    box-shadow:inset 0px 0px 0px 1px $white;
					transition: all 200ms ease;

					.text {
						padding: 0;
						color: $light-grey;
						opacity: .3;
						margin: 0;
						font-size: 68px;
						line-height: inherit;
						p {
							margin: 0;
						}
					}

                    &.selected {
						-webkit-box-shadow:inset 0px 0px 0px 2px $light-green;
					    -moz-box-shadow:inset 0px 0px 0px 2px $light-green;
					    box-shadow:inset 0px 0px 0px 2px $light-green;
						.text {
							opacity: 1;
						}
					}

					&:hover, &:focus {
						outline: none;
						-webkit-box-shadow:inset 0px 0px 0px 2px $green;
					    -moz-box-shadow:inset 0px 0px 0px 2px $green;
					    box-shadow:inset 0px 0px 0px 2px $green;
						transition: all 200ms ease;
					}
                }
			}
			img {
				margin: 0 30%;
    			display: block;
			}
		}
		.bubbles {
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;
			align-items: flex-start;
			align-content: center;
			padding: 20px 0;
			.bubble {
				width: 10px;
				height: 10px;
				display: inline-block;
				margin-left: 5px;
				margin-right: 5px;
				background-color: transparent;
				border: 2px solid $light-grey;
				border-radius: 50%;

				&.previous {
					background-color: $light-grey;
					border-color: $light-grey;
					cursor: pointer;
				}
				&.active {
					background-color: $green;
					border-color: $green;
					cursor: pointer;
				}
			}
		}
	}
}

.tippy-tooltip {
	background-color: $green !important;
}
.arrow-regular {
	border-bottom-color: $green !important;
}
