@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{
		display: none;
		flex-grow: 1;
	}

	// @active
	& > section.active{
		display: block;
	}

	// @active + .list
	& > section.active.list{
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		// flex-wrap: wrap;

		.inline-box{
			flex: 1 1 1;
		}
	}



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

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

			background-color: #fff;

			/* (1) Titre de l'element */
			.title{
				display: inline-block;

				font-size: 1.15em;
				font-weight: bold;

				& > span{
					font-size: .8em;
					color: #333;
				}
			}

			/* (2) Code RFID */
			.code{
				display: inline-block;
				color: #777;
				
				// svg (icone)
				svg{
					display: inline-block;
					position: relative;
						margin-left: .5em;
						margin-right: .5em;
						margin-bottom: -.6em;
						width: 1.5em;
						height: 2em;

					path{
						fill: #777 !important;
					}
				}

			}

			/* (3) Adresse mail */
			.mail{
				display: block;
				margin: 1em;
				color: #777;
				
				// svg (icone)
				svg{
					display: inline-block;
					position: relative;
						margin-left: .5em;
						margin-right: .5em;
						margin-bottom: -.6em;
						width: 1.5em;
						height: 2em;

					path{
						fill: #777 !important;
					}
				}

			}
			
	}


}