/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
//
// The dropdown menu (ul)
// ----------------------
.dropdown-menu{
	.border-radius(@borderRadiusSmall);
	.box-shadow(0 2px 6px rgba(0,0,0,.1));
	border: 1px solid @dropdownMenuBorderColor;

	// Links within the dropdown menu
	li > a {
		padding: 5px 10px;
		color: @dropdownLinkColor;
	}
	&.dropdownArrowTop {
			&:before,&:after {
		    	position: absolute;
			    content: '';
			    display: inline-block;
			}
			&:before {
		    border-left:   9px solid transparent;
		    border-right:  9px solid transparent;
		    border-bottom: 9px solid @dropdownBorder;
		    top: -9px;
		    left: 29px ~'; /** orientation=lt */ ';
		    right: 29px ~'; /** orientation=rt */ ';
		  }
		  &:after {
		    border-left:   8px solid transparent;
		    border-right:  8px solid transparent;
		    border-bottom: 8px solid @dropdownBackground;
		    top: -8px;
		    left: 30px ~'; /** orientation=lt */ ';
		    right: 30px ~'; /** orientation=rt */ ';
		  }
	}
}

.uiDropdownWithIcon{
	.dropdown-menu {
	  li > a {
		padding: 5px 20px 5px 10px ~'; /** orientation=lt */ ';
		padding: 5px 10px 5px 20px ~'; /** orientation=rt */ ';
		i{
			margin-right: 9px ~'; /** orientation=lt */ ';
			margin-left: 9px ~'; /** orientation=rt */ ';
		}
	  }
	}
	> .dropdown-menu {
		.border-radius(@borderRadiusSmall);
	}

}
// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.dropdown-submenu:hover > a ,
.uiDropdownMenu  li > a.active{
  #gradient > .vertical(@dropdownLinkBackgroundHover, @dropdownEndColor);
}
.uiDropdownMenu  li > a.active {
	color: @dropdownLinkColorHover;
}
.dropdown-menu .divider {
	margin: 5px 0 4px;
    border: none;
    background: @dropdownDividerTop;
}

#ThemeDropDown {
	.dropdown-menu {
    min-width: 200px;
  }
}

#ThemeDropDown .btn.dropdown-toggle > span:first-child {
	width: 150px;
	display: inline-block;
	text-align: start;
}

.dropdown-menu{
	> li {
        list-style-type: none!important;
		.block-item {
			cursor: pointer;
			display: block;
			padding: 5px 10px;
			&.even {
		    	background-color: @primaryBackground;
		    }
		    .text-link {
		    	color: @linkColor;
		    }
		    &:hover {
				#gradient > .vertical(@dropdownLinkBackgroundHover, @dropdownEndColor);
				color: @dropdownLinkColorHover;
				* {
					color: @dropdownLinkColorHover;
				}
			}
		}
        .actionIcon {
            text-align: start;
        }
	}
}


// The dropdown menu (ul)
// ----------------------
.uiDropDownCal,.uiDropdownMenu {
	 li > a {
		display: block;
		 clear: both;
		 font-weight: normal;
		 line-height: @baseLineHeight;
		 color: @dropdownLinkColor;
		 white-space: nowrap;
		 padding: 6px 19px;
	 }	 	
}
.dropdown-menu.uiDropdownWithIcon {
	
	// Arrows
	.arrowLeft,
	.arrowLeft:after{
	  position: absolute;
	  display: inline-block;
	  width: 0;
	  height: 0;
	  border-color: transparent;
	  border-style: solid;
	}
	.arrowLeft:after{
	  content: "";
	  z-index: -1;
	}
	.arrowLeft{
		top: 50%; 
		left: -9px ~'; /** orientation=lt */ ';
		right: -9px ~'; /** orientation=rt */ ';
		margin-top: -@popoverArrowWidth; 
		border-width: 9px  9px 9px 0 ~'; /** orientation=lt */ ';
		border-width: 9px  0 9px 9px ~'; /** orientation=rt */ ';
		border-right-color: @dropdownBackground;
		&:after {
		  border-width: 10px 10px 10px 0 ~'; /** orientation=lt */ ';
		  border-width: 10px 0 10px 10px ~'; /** orientation=rt */ ';
		  border-right-color: @dropdownBorder;
		  bottom: -10px;
		  left: -1px ~'; /** orientation=lt */ ';
		  right: -1px ~'; /** orientation=rt */ ';
		}
	}
}
//uiDropDownCal state hover and active
.uiDropDownCal li > a:hover,
.uiDropDownCal li > a:focus,
.uiDropDownCal .active > a,
.uiDropDownCal .active > a:hover,
.dropdown-submenu:hover > a,
.uiDropdownMenu li > a:hover,
.uiDropdownMenu li > a:focus,
.uiDropdownMenu .active > a,
.uiDropdownMenu .active > a:hover {
		text-decoration: none;
  	    color: @dropdownLinkColorHover;
  		#gradient > .vertical(@dropdownLinkBackgroundHover, @dropdownEndColor);
}


.uiDropdownWithIcon{
	.uiDropDownCal, .uiDropdownMenu {
	  li > a {
		padding: 6px 19px;
		i{
			margin-right: 5px ~'; /** orientation=lt */ ';
			margin-left: 5px ~'; /** orientation=rt */ ';
		}
	  }
	}

}

.dropdown-submenu {
	> a:after {
		content: "\e75c";
		border: none;
		.font-icon;
		font-size:  @sizeIcon12x12 - 1;
		margin-right: -5px ~'; /** orientation=lt */ ';
		margin-left: -5px ~'; /** orientation=rt */ ';
		color: @colorIconDefault;
	}
	&:hover {
		> a:after {
			color: @colorIconSecondary;
		}	
	} 
}