@import 'constants';

#WRAPPER > #MENU-SIDE{

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

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

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

		color: #a2a2a2;
		line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em );

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

		cursor: pointer;
		
		svg, svg *{
			width: 1.5em;
			height: 1.5em;
			
			stroke: none !important;
			fill: #000 !important;

			transition: fill .3s;
		}


		&[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, svg *{
				fill: darken($theme-color, 20) !important;
			}
		}

	}
	

}