@import 'constants';

#WRAPPER > #MENU-SIDE{

	& > span[data-link]{
		display: block;
		position: relative;
			width: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );
			height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );

		// padding: 1em;
		margin: 2em .7em;
		padding: .55em;

		border: .01em solid transparent;
		border-radius: 2px;
		

		// Decalage des elements du menu
		&.mt{ // Margin Top
			margin-top: 3em;
		}
		&.mb{ // Margin Bottom
			margin-bottom: 3em;
		}

		color: #a2a2a2;
		line-height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );

		transition: color .3s, border .3s;

		cursor: pointer;
		
		svg, svg *{
			width: calc( #{$menu-side-width} / 2.5 );
			height: calc( #{$menu-side-width} / 2.5 );
			
			// stroke: none !important;
			// fill: #777 !important;

			transition: fill .3s;
			
			pointer-events: none;
		}


		&[data-desc]:after{
			content: attr(data-desc);
			display: block;
			position: absolute;
				top: calc( .7em - 2*.3em );
				left: calc( 4.6em - 2*.3em );
			padding: .3em;

			border-radius: 3px;

			background-color: #2a2a2a;

			color: #e2e2e2;
			white-space: nowrap;

			transition: transform .1s;
			
			transform-origin: 0 0;
			transform: scaleX(0);

		}


		&:hover,
		&.active{
			color: $theme-color;
			border-color: #e6e6e6;
			box-shadow: inset 0 0 .5em #eee;

			&:hover:after{
				transform: scaleX(1);
				color: #fff;
			}

			svg #stylisable{ // pour les elements sauf le profil
				fill: #000 !important;
			}

			svg #stroke-stylisable{ // pour le profil
				stroke: #000 !important;
			}
		}

	}
	

}