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

/**************** variables *********************/


/**************** mixin *************************/


/*************** less *******************/
.uiGroupsNavigationPortlet {

	.title {
		text-transform: uppercase;
		color: @plfNavigationTitleColor;
		#gradient > .vertical(@primaryBackgroundLight, @primaryBackgroundHover);
		height: 40px; line-height: 41px;
		padding: 0 25px;
		margin: 0;
		.box-shadow(~"inset 0 1px 0 @baseBackground,0 1px 0 @baseBackground");
		border-bottom: 1px solid @borderColor;
    	border-top: 1px solid @borderColor;
		text-shadow: none;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
        a {
          color: @plfNavigationTitleColor;
        }
	  	.uiIconGroupNavigation {
		  margin-right: 8px;
		}
	}
	.groupNavigation {
		list-style: none;
		margin: 0;
		padding: 5px 0 15px 0;

		.groupItem  {
			> div {
				padding: 8px 10px 0;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				.groupIcon {
					margin-left: 20px;
					overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
				}
				i + .groupIcon {
					margin-left: 4px;
				}
				.uiIconArrowDown {
					 background-position: 2px -118px;
					cursor: pointer;
				}

			}
			 .groupItem { // child item
			 	.groupIcon  {
			 		margin-left: 35px;
			 	}
			 }
			.active {
				 margin: 8px 0 0 ;
			    padding: 7px 10px;
			    position: relative;
				background: @plfNavigationBgSelected;
				border-top: 1px solid @plfNavigationBorderSelected;
				border-bottom: 1px solid @plfNavigationBorderSelected;
				.box-shadow(0 0px 3px rgba(0, 0, 0, 0.11));
				&:after {
					background: @plfNavigationBgBorderLeft;
				    border: 1px solid @plfNavigationBorderLeft;
				    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;
					.user-select(none);
				}
			}

		}

		.groupIcon {
			.user-select(none);
			color: @plfNavigationColor;
			&:hover {
				color: @plfNavigationColorHover;
			}
		}

	}
}