//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

@import '../lib/variables';
@import '../lib/mediaqueries';

.Vlt-template {
	display: flex;
	flex-flow: row wrap;
	width: 100%;

	&--header {
		.Vlt-sidenav__mobile {
			@media #{$S-only} {
		    	top: 64px;
		    	z-index: $z-index-sidenav-mobile-trigger;
		    }
		}
	}
}

.Vlt-header {
	align-items: center;
	background: $white;
	display: flex;
	flex: 0 0 100%;
	height: 64px;
	justify-content: space-between;
	padding: 14px 24px;
	transition: height 0.5s;
	width: 100%;
	z-index: $z-index-header;

	@media #{$S-only} {
    	position: fixed;
    }

	&__logo {
		display: block;
		flex: 0 0 270px;

		@media #{$S-only} {
	    	flex: 0 0 50px;
	    }

		img {
			height: 24px;
		}
	}

	&__menu {
		flex: 1;

		&--right {
			text-align: right;
		}
	}

	.Vlt-btn {
		margin: 0;
	}
}

.Vlt-main {
	flex: 1;
	height: 100vh;
	overflow-y: auto;
    padding: 24px 32px;

	&--light {
		background: $grey-lighter;
	}

	.Vlt-template--sidenav & {
		@media #{$S-only} {
	    	padding-top: 70px;
	    }
	}

	.Vlt-template--auth & {
	    align-items: center;
	    display: flex;
	    justify-content: center;

	    @media #{$S-only} {
	    	padding-top: 100px;
	    }
	}

	.Vlt-template--sidenav.Vlt-template--header  & {
		@media #{$S-only} {
			padding: 140px 16px 24px;
	    }
	}

	&__content {
		max-height: calc(100vh - 130px);
		max-width: 600px;
		overflow-y: auto;
		text-align: center;

		@media #{$S-only} {
	    	max-height: calc(100vh - 100px);
	    }
	}
}

.Vlt-template--header .Vlt-sidenav,
.Vlt-template--header .Vlt-main {
	@media #{$M-plus} {
		height: calc(100vh - 70px);
	}
}