@import "../assets/styles/bootstrap/variables";

.sections-navigator{
	display: flex;

	.section{
		padding-top: 20px;
		display: flex;

		&.disabled{
			color: $gray;
		}
	}
}

.section{

	&.disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.section{
		.section-title{
			h3{
				font-size: 19px;
				font-weight: normal;
			}
		}

		.section-content{
			padding-left: 5px;
		}
	}
}

.sections-nav{
	flex: 1 0 0;
	padding-top: 20px;

	ul{
		padding-left: 0;
		text-align: right;
		padding-right: 15px;
		font-size: 15px;
		position: absolute;
		width: 15vw;

		li{
			list-style: none;
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			-webkit-transform: translate3d(0, 0, 0);
			-moz-transform: translate3d(0, 0, 0);
			overflow-x: hidden; 
			
			a{
				color: $gray;
				display: inline-block;
				cursor: pointer;

				height: 70px;
				padding-right: 20px;
				vertical-align: middle;
				display: table-cell;
				width: 1%;
				border-right: 4px solid $gray-lighter-shadow;
				font-weight: normal;

				& + ul{
					display: none;
				}
				
				&.active{
					color: $gray-dark;
					transform: scale(1);
					font-weight: normal;
					border-color: $theme-primary;

					& + ul{
						display: block ;
					}
				}
				&:hover{
					color: $gray-dark;
				}
			}

			ul{
				position: static;
				width: 100%;
				padding-right: 0;
				font-size: 10px;

				li{
					a{
						height: 20px;
					}
				}
			}
		}
	}

	&.unactive{
		ul li:first-child a{
			color: $gray-dark;
			transform: scale(1);
			font-weight: normal;
			border-color: $theme-primary;
		}
	}
}

.fixed{
	.sections-nav ul{
		position: fixed;
		top: 80px;
	}
}

.section-content{
	padding-left: 20px;

	form{
		padding-top: 0px;
	}
}

.section-title{
	margin-bottom: 50px;
}

.sections{
	flex: 4 0 0;
}

.section-description{
	flex: 1 0 0;
	padding-top: 75px;
	padding-left: 30px;
	font-weight: 100;
	font-size: 14px;
    text-align: left;
    line-height: 1.5;
}

.section-wrapper{
	flex: 3 0 0;

	.section-description {
		flex: 1 0 0;
		padding-top: 5px;
		padding-left: 20px;
		padding-bottom: 20px;
	}
}

.slideout{
	.sections-nav{
		ul{
			padding-left: 0;
			text-align: right;
			padding-right: 20px;
			font-size: 15px;
			position: fixed;
			width: 20%;

			ul{
				position: static;
				font-size: 10px;
				width: 100%;
				padding-right: 0;
			}
		}
	}

	.section-title{
		margin-bottom: 20px;
	}

	.section-description {
		padding-top: 0px;
		padding-left: 20px;
		padding-bottom: 50px;
	}
}
/*
.slideout{
	.sections-nav{
		position: fixed;
		top: calc(100vh - 60px);
		background: $gray-lighter;
		left: 0;
		right: 0;
		padding: 0px;
		height: 60px;
		box-shadow: 0 -1px 0 $gray-lighter-shadow;

		ul{
			position: static;
			display: flex;
			flex-direction: row;
			width: 100%;
			padding: 0;
			margin: 0;
			text-align: center;

			li{
				flex: 1 0 0;
				margin: 0;
				height: 60px;

				a{
					display: table-cell;
					width: 1%;
					height: 60px;
					vertical-align: middle;
					transform: scale(1);
					font-weight: normal;
					border-top: 4px solid transparent;
					border-right: none;

					&:hover{
						//background-color: $gray;
					}

					&.active{
						border-color: var(--theme-primary);
						font-weight: bold;
					}
				}
			}
		}

		&.unactive{
			ul li:first-child a{
				border-color: var(--theme-primary);
				font-weight: bold;
			}
		}
	}

	.sections{
		padding-bottom: 60px;
	}

	.fixed{
		.sections-nav ul{
			position: static;
			top: 0px;
		}
	}
}
*/