@import "../../../variables.less";
@import "../../../mixins.less";

.uiSpaceMenu {
	border-bottom: 1px solid @borderColor;
	#gradient > .vertical(@primaryBackgroundLight, @primaryBackgroundHover);
	.box-shadow(inset);
	height: 90px;

	.spaceMenuTab {
		background: url("@{images-path}/social/skin/SpaceMenuPortlet/shadow.png") no-repeat left center;	
		height: 90px;
		border-bottom: none;

		> li {
			padding-bottom: 4px;
			+ li {
				margin-left:  -1px;
			}
		}

		> .active {
			background: url("@{images-path}/social/skin/SpaceMenuPortlet/arrowIcon.png") no-repeat bottom center;	
		}

		> li > a,
		> li > a:hover,
		> .active > a,
		> .active > a:hover {
			text-align: center;
			border:none;
			background: none;
			height: 51px;
			min-width: 45px;
			margin: 10px 20px;
			.border-radius(5px);
		}

		> .active > a {
			#gradient > .vertical(@baseColorLight, @baseColorMedium);
			.box-shadow(1px 0 4px rgba(0,0,0,0.38) inset);
		}

		> li > a:hover,
		> .active > a:hover ,
		> li.dropdown.open > a:hover,
		> li.dropdown.open > a:focus{
			#gradient > .vertical(rgba(153,153,153,0.2),rgba(130,130,130,0.2));
			.box-shadow(0 0 4px rgba(0,0,0,0.36) inset);
		}

		> li > a > img {
			.size(31px,31px);
		}

		> li > a > span {
			display: block;
			color: @textColor;
		}

		> .active > a > span {
			color: @baseBackground;
			text-shadow: none;
		}

		> .dropdown > a > b {
			border: 2px dashed @borderColor;
			color: @textColor;
			display: block;
			font-size: 20px;
			font-weight: 100;
			padding: 3px 8px;
		}
	  	// Aligning Apps Icons in "More" menu
	  	li.dropdown.open ul.dropdown-menu li.item a span {
		  	position: relative;
		  	bottom: 8px;
		}
	}

	.nodeIconBg {
	  display: block;
	  float: left;
	  width: 39px;
	  background-position:center;
	}
}

@media(max-width: 1024px) {
	.uiSpaceMenu{
		.spaceMenuTab{
			> .active {
		        background: none;
		    }
		    li.dropdown.open ul.dropdown-menu li.item a span {
		        bottom: 12px;
		    }
		    > li > a,
		    > li > a:hover,
		    > .active > a,
		    > .active > a:hover {
		        .box-sizing(border-box);
		        height: 90px;
		        padding: 12px ;
		        margin: 0 20px;
		        .border-radius(0);
		    }
		    > li > a > .tabName {
		        margin: 6px 0 0 ;
		    }
		}
	    .dropdown span {
	        margin-top: 6px;
	    }
	    [class^="uiIcon"] {
	        font-size: 42px;
	    }
	    .dropdown-menu {
            margin-top: -4px;
            .border-radius(0);
        }
	}
}

@media(max-width: 767px){
    .uiSpaceMenu {
        [class^="uiIcon"]{
        	font-size: 35px;
        }
        .spaceMenuTab{
        	> li > a > .tabName, > li > a > span {
		        font-size: 13px;
		    }
        }
        
    }
}

@media(max-width: 480px){
    .uiSpaceMenu {
    	height: 60px;
        margin-top: -9px;
        .spaceMenuTab{
        	height: 60px;
        	> li > a > .tabName, > li > a > span {
		       display: none;
		    }
		    > li > a,
		    > li > a:hover,
		    > .active > a,
		    > .active > a:hover {
		        height: 60px;
		        padding: 15px ;
		        margin: 0 5px;
		    }
		    > li.item:last > a {
		        margin-right: 0;
		    }
		    > li > a.dropdown-toggle {
		        float: right ;
		        padding: 12px 20px;
		        margin-left: 0;
		        margin-right: 0;
		        display: inline-block;
		    }
        }
	    [class^="uiIcon"] {
	        font-size: 35px;
	    }
    }

}