@import 'constants';

#WRAPPER > #CONTAINER{

	/* [1] Menu interne (sub-menu-side)
	=========================================================*/
	
	& > .sub-menu-side{
		display: block;
		position: relative;

		// Les liens du menu
		& > span[data-sublink]{
			display: block;
			position: relative;
				width: 7.5em;

			padding: .3em 1em .3em 2em;
			margin: 1em	;
			
			border-radius: 3px;
			
			color: $sub-menu-color;
			text-shadow: 1px 1px white;
			white-space: nowrap;

			transition: all .2s;

			cursor: pointer;

			overflow: hidden;

			// Dimension/Position des svg (icones)
			& > .svg > svg{
				display: inline-block;
				position: absolute;
					left: .5em;
					// left: 100%;
					top: 50%;
					width: 1em;
					height: 1em;

				transform: translateY(-50%);

				// Coloration pour tous les elements du svg
				& path{
					fill: $sub-menu-color !important;
				}
			}
			
			&:hover,
			&.active{
				color: darken($sub-menu-color, 30);
				background-color: #d8deea;
				box-shadow: inset 0 0 4px #c8ced9;

				& > .svg > svg path{
					fill: darken($sub-menu-color, 30) !important;
				}

			}

		}

		
		// On decale le premier
		& > span[data-sublink]:nth-child(1){
			margin-top: 1em;
		}

	}


	/* [2] Section (contenu)
	=========================================================*/
	& > section{
		// background-color: #f00;
		flex-grow: 1;
	}



	/* [3] INLINE-BOX pour afficher les listes de donnees
	=========================================================*/
	& > section > .inline-box{
		display: block;
		position: relative;
			width: calc( 100% - 2*1em - 2*1em );
			margin: 1em;
			padding: 1em;

			border-radius: 3px;
			box-shadow: 0 0 1px #b7b7b7;

			background-color: #fff;
	}


}