/**
 * @author:	Emmanuel SMITH <emmanuel.smith@live-session.fr>
 * project:	customDefault
 * file: 	app.scss
 * Date: 	11-Apr-20
 * Time: 	14:01
 */

@import "~bootstrap/scss/bootstrap";
@import "../common/variables";

* {
	margin: 0;
	padding: 0;
}

.capitalized {
	text-transform: capitalize;
}

.text-center {
	text-align: center;
}

.hidden {
	visibility: hidden;
}

html {
	@include prefixer(display, flex, ("webkit", "moz", "o"));
	height: 100vh;
	width: 100vw;
	font-family: roboto;
}

body,
#app,
main {
	@include prefixer(display, flex, ("webkit", "moz", "o"));
	@include prefixer(flex-direction, column, ("webkit", "moz", "o"));
	width: 100%;
	overflow: hidden;
	background: $cBlack !important;
}

body {
	background-color: $cBlack;
	color: $cWhite;
	word-wrap: break-word;
}

#app {
	background: $cBlack;
	@include prefixer(background-size, cover, ("webkit", "moz", "o"));
	font-family: 'Inconsolata', monospace;
}

main {
	height: 100%;
	
	&.waiting {
		@include prefixer(display, flex, ("webkit", "moz", "o"));
		@include prefixer(justify-content, center, ("webkit", "moz", "o"));
		@include prefixer(align-items, center, ("webkit", "moz", "o"));
		
		h1 {
			width: 100%;
			background: $cGray;
			border: 2px solid $cRed;
			border-width: 2px 0;
			text-align: center;
			margin: 0;
			padding: 1rem 0 1.5rem;
		}
	}
}


.wrapper {
	@include prefixer(display, flex, ("webkit", "moz", "o"));
	height: 100%;
	
	&.menu {
		height: auto;
		overflow-y: auto;
	}
	
	position: relative;
	
	> * {
		width: 100%;
	}
}

.zone-wrapper {
	@include prefixer(display, flex, ("webkit", "moz", "o"));
	@include prefixer(flex-direction, column, ("webkit", "moz", "o"));
	@include prefixer(justify-content, center, ("webkit", "moz", "o"));
	@include prefixer(align-items, center, ("webkit", "moz", "o"));
	
	> * {
		width: 100%;
	}
}

.btn-outline-ets {
	@include button-outline-variant($cWhite, $cWhite, transparentize($cRed, .5), $cRed);
	background: $cBlackTransparentHigh;
	color: $cWhite;
	border-radius: 0;
	box-shadow: none;
	border: 1px solid $cGray;
	min-width: 5rem;
	transition: all .3s ease-in-out;
	
	:not([disabled]) {
		&:hover, &:focus, &.active {
			border-color: $cRed;
			background: transparentize($cRed, .5);
			transition: all .1s ease-in-out;
		}
	}
}

input.btn-outline-ets {
	height: 2rem;
	padding: 2px 3px;
}

.slide-fade-enter-active {
	transition: all .3s ease;
}

.slide-fade-leave-active {
	transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active for <2.1.8 */
{
	transform: translateX(10px);
	opacity: 0;
}