@import 'constants';


#CONTAINER > .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;
	}

}