@import 'constants';


#CONTAINER{

	display: block;
	position: absolute;
		top: $header-height;
		left: $menu-width;
		height: calc( 100% - #{$header-height} );
		width: calc( 100% - #{$menu-width} );


	background-color: $bg-color;

	overflow: hidden;
	overflow-y: auto;

	z-index: 100;

}



@keyframes bg-fade{
	to{ background-color: lighten($bg-color, 5%); }
}

// bounce
@keyframes bounce-up{
	from{ transform: scale(.95); }
	to{   transform: scale(1);  }
}

// animation for incoming element
@keyframes incoming{
	from{ transform: translateY(-2em);  opacity: 0; }
	to{ transform: translateY(0); opacity: 1; }
}

// animation for outgoing element
@keyframes outgoing{
	from{ transform: translateY(0);  opacity: 1; }
	to{   transform: translateY(2em); opacity: 0; }
}


/* [1] List style
---------------------------------*/
@import 'container/list';


/* [2] Card style
---------------------------------*/
@import 'container/card';





// animation for navigation -> each card-list element
#CONTAINER > div.container{

	& > section:not([data-anim='0']),
	& > input:not([data-anim='0']),
	& > h1:not([data-anim='0']),
	& > button:not([data-anim='0']){
		animation: bounce-up .2s ease-out;
	}


	&[data-anim-outgoing='1']{
		& > section,
		& > input,
		& > h1,
		& > button{ animation: outgoing .4s ease-in-out forwards; }
	}
	&[data-anim-incoming='1']{
		& > section,
		& > input,
		& > h1,
		& > button{ animation: incoming .4s ease-in-out; }
	}
	// &[data-anim-bounce='1']{
	// 	& > section,
	// 	& > input,
	// 	& > h1,
	// 	& > button{ animation: bounce-up .6s ease-in-out reverse forwards; }
	// }

}