@import "../variables.less";
@import "../mixins.less";
// -------------------------
.uiSpaceNavigationPortlet {
	padding-bottom: 20px;
	.title {
		text-transform: uppercase;
		color: @linkColor;
		#gradient > .vertical(@componentBackgroundLight, @componentBackgroundHover);
		height: 40px; line-height: 41px;
		padding: 0 15px;
		margin: 0;
		 .box-shadow(~"inset 0 1px 0 @white,0 1px 0 @white");
		 border-bottom: 1px solid @borderColor;
   		 border-top: 1px solid @borderColor;
		text-shadow: 0 1px 1px @white;
	}

	.searchInput input {
		border: 1px solid @borderColor;
    	.border-radius(4px);
    	 .box-shadow(~"inset 0 1px 1px rgba(0, 0, 0, 0.1)");
	    height: 28px;
	    margin: 18px auto 10px auto;
	    padding: 0 12px;
	    width: 200px;
	    display: block;
	     color: @grayLight;
    	&.Focus {
		   color: @grayDark;
		}
	}


	.spaceNavigation {
		list-style: none;
        margin: 0;
        padding: 10px 0px;
        max-height: 320px;
        overflow: auto;
		.noSpace {
		color: @gray;
	    padding: 10px 0;
	    text-align: center;
		}
		.spaceItem {
			padding: 5px 25px;
            display: block;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
		}

		.spaceIcon {
			    color: @gray;
			    display: block;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    white-space: nowrap;
			    width: inherit;
			> img {
				margin-right: 5px;
				vertical-align: -4px;
			}

			&:hover {
				color: @linkColorHover;
			}
		}

		.spaceItemSelected {
			padding: 7px 25px;
            position: relative;
            background: @white;
            border-top: 1px solid @borderColor;
            border-bottom: 1px solid @borderColor;
            .box-shadow(0 0px 3px rgba(0, 0, 0, 0.11));
			&:after {
				background: @primaryLightColor;
				    border: 1px solid @primaryDarkColor;
				    border-left: 0;
				    .box-shadow(~"inset -1px 0px 2px rgba(255, 255, 255, 0.14)");
				    content: "";
				    height: 34px;
				    left: 0;
				   	top: -1px;
				    position: absolute;
				    width: 5px;
		  }
			> a {
				font-weight: bold;
			}
		}
	}

	.moreSpace {
		padding: 6px 25px;
    	text-align: center;
    	 margin: 0 0 10px 0;
		> a {
			#gradient > .vertical(@white, @componentBackground);
			height: 24px;
			line-height: 24px;
			border: 1px solid @borderColor;
			color: @gray;
			display: inline-block;
			margin: auto;
			padding: 0 10px;
			.border-radius(3px);
			font-size: 12px;
			&:hover {
				background-color: @componentBackgroundHover;
			}
		}
	}

	.joinSpace {
		border-bottom: 1px solid @borderColor;
        border-top: 1px solid @borderColor;
        .box-shadow(~"inset 0 1px 0 @white,0 1px 0 @white");
        line-height: 32px;

    > a {
    	color: @gray;
    	 display: block;
    	 padding-left: 25px;
    	&:hover {
				color: @linkColorHover;
			}
    	> i {
    		margin-right: 5px;
    	}
    }
	}

}