//
// Popbox
// --------------------------------------------------
// Popbox inherits variables from popover.

.popbox() {

	// Position
	position: absolute;
	top: 0;
	left: 0;	
	z-index: 10020;

	// Appearance
	background: @esPopboxBackground;
	.getContrast(@esPopboxBackground); //contrast font color base on background color
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.2);	
	.border-radius(6px);
	.box-shadow(0 5px 10px rgba(0,0,0,.2));
	
	// Text formatting
	white-space: normal;
	text-align: left !important;
	line-height: 18px;

	&.loading {
		background-image: url("@{media_uri}/../images/loading.gif");
		background-position: center center;
		background-repeat: no-repeat;
	}

	// Arrows
	.arrow,
	.arrow:after {
		position: absolute;
		display: inline-block;
		border-color: transparent;
		border-style: solid;
	}

	.arrow:after {
		content: "";
		z-index: -1;
	}

	.top-arrow() {
		// margin-top: -10px;
		.arrow {
			bottom: -@esPopboxArrowWidth;
			left: 50%;
			margin-left: -@esPopboxArrowWidth;
			border-width: @esPopboxArrowWidth @esPopboxArrowWidth 0;
			border-top-color: @esPopboxArrowBackground;
			&:after {
				border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
				border-top-color: @popoverArrowOuterColor;
				bottom: -1px;
				left: -@popoverArrowOuterWidth;
				margin: 0;
			}
		}
	}

	.right-arrow() {
		// margin-left: 10px;
		.arrow {
			top: 50%;
			left: -@esPopboxArrowWidth;
			margin-top: -@esPopboxArrowWidth;
			border-width: @esPopboxArrowWidth @esPopboxArrowWidth @esPopboxArrowWidth 0;
			border-right-color: @esPopboxArrowBackground;
			&:after {
				border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
				border-right-color: @popoverArrowOuterColor;
				bottom: -@popoverArrowOuterWidth;
				left: -1px;
			}
		}
	}

	.bottom-arrow() {
		// margin-top: 10px;
		.arrow {
			top: -@esPopboxArrowWidth;
			left: 50%;
			margin-left: -@esPopboxArrowWidth;
			border-width: 0 @esPopboxArrowWidth @esPopboxArrowWidth;
			border-bottom-color: @esPopboxArrowBackground;
			&:after {
				border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
				border-bottom-color: @popoverArrowOuterColor;
				top: -1px;
				left: -@popoverArrowOuterWidth;
				margin: 0;
			}
		}	
	}

	.left-arrow() {
		// margin-left: -10px; 
		.arrow {
			top: 50%;
			right: -@esPopboxArrowWidth;
			margin-top: -@esPopboxArrowWidth;
			border-width: @esPopboxArrowWidth 0 @esPopboxArrowWidth @esPopboxArrowWidth;
			border-left-color: @esPopboxArrowBackground;
			&:after {
				border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
				border-left-color: @popoverArrowOuterColor;
				bottom: -@popoverArrowOuterWidth;
				right: -1px;
			}
		}	
	}

	&.top {
		.top-arrow();
	}

	&.top-left {
		.top-arrow();
		.arrow {
			left: 0px;
			right: auto;
			margin-left: @esPopboxArrowWidth;
			margin-right: auto;
		}
	}

	&.top-right {
		.top-arrow();
		.arrow {
			left: auto;
			right: 0px;
			margin-left: auto;
			margin-right: @esPopboxArrowWidth;			
		}
	}	

	&.bottom {
		.bottom-arrow();		
	}

	&.bottom-left {
		.bottom-arrow();
		.arrow {
			left: 0px;
			right: auto;
			margin-left: @esPopboxArrowWidth;
			margin-right: auto;			
		}
	}

	&.bottom-right {
		.bottom-arrow();
		.arrow {
			left: auto;
			right: 0px;
			margin-left: auto;
			margin-right: @esPopboxArrowWidth;
		}
	}

	&.left {
		.left-arrow();
	}

	&.left-top {
		.left-arrow();
		.arrow {
			top: 0px;
			margin-top: @esPopboxArrowWidth;
			margin-bottom: auto;
		}
	}

	&.left-bottom {
		.left-arrow();
		.arrow {
			top: auto;
			bottom: 0px;
			margin-top: auto;
			margin-bottom: @esPopboxArrowWidth;
		}
	}

	&.right {
		.right-arrow();		
	}

	&.right-top {
		.right-arrow();
		.arrow {
			top: 0px;
			margin-top: @esPopboxArrowWidth;
			margin-bottom: auto;			
		}
	}

	&.right-bottom {
		.right-arrow();
		.arrow {
			top: auto;
			bottom: 0px;
			margin-top: auto;
			margin-bottom: @esPopboxArrowWidth;
		}		
	}

	.popbox-header {
		border-bottom: 1px solid @esPopboxFooterBackground;
		padding: 5px 15px;
		font-size: 11px;
		.clearfix();
		
		.es-title {
			font-weight: bold;
			float: left;
		}
		.es-action {
			float: right;
		}
	}

	.popbox-body {
		padding: 5px 10px;
	}
}

// #es-wrap.popbox
&.popbox {
	.popbox();
	width: auto;
}

// Data API
// index.php?option=com_easysocial&view=styleguide&layout=render&file=apidata
&.popbox {
	&.popbox-friends {
		width: 200px;
		min-height: 50px;
		text-align: center;
	}
	&.popbox-followers {
		width: 220px;
		min-height: 80px;
		.popbox-content {
			padding: 10px;
		}
	}
	&.popbox-updates {
		width: 300px;
		min-height: 80px;
		.popbox-content {
			padding: 20px;
		}
	}
	&.popbox-toolbar {
		width: 220px;
		height: auto;
		// border: none;
		// Links within the dropdown menu
		// .border-radius( 2px );
		background: @esPopboxBackground;
		// &.bottom {
		.arrow {
			border-bottom-color: @esPopboxBackground;
		}
		// }
		.divider {
			border-bottom: 1px solid @esToolbarDropdownDividerBorder;
			display: block;
			margin: 7px 1px;
			overflow: hidden;
		}
		h5 {
			line-height: 20px;
			height: 20px;
			vertical-align: middle;
			font-size: 12px;

			i{
				margin-right: 4px;
			}
		}
		label {
			color: @esColor;
		}

		li > a{
			color: @esToolbarDropdownColor;
		}
		a {
			font-size: 11px;
			line-height: 18px;
		}

		.logout-form{
			display: none;
		}
		.logout-link{
			margin-bottom: 8px;
		}
		.dropdown-menu-user { //ul
			list-style: none;
			margin: 0;
			padding: 0;
		}
		li > a {
		  display: block;
		  padding: 3px 20px;
		  clear: both;
		  font-weight: normal;
		  line-height: @baseLineHeight;
		  // color: @dropdownLinkColor;
		  white-space: nowrap;
		  border-top: 1px solid transparent;
		  border-bottom: 1px solid transparent;
		}
		// Hover state
		// -----------
		li > a:hover,
		li > a:focus {
		  text-decoration: none;
		  color: @dropdownLinkColorHover;
		  #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));

		  // background: #E7EDF3;
		  border-top: 1px solid @dropdownDividerHoverTop;
		  border-bottom: 1px solid @dropdownDividerHoverBottom;
		}

		// Active state
		// ------------
		.active > a,
		.active > a:hover {
		  color: @dropdownLinkColorActive;
		  text-decoration: none;
		  outline: 0;
		  #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
		}

		.dropdown-menu-login {
			// padding: 10px;
			form {
				margin: 0;
			}
			li {
				.clearfix();
				padding: 5px 10px;
			}
			li > a {
				background: none;
				border: none;
				color: @esToolbarDropdownLoginColor;
				&:hover {
					text-decoration: underline;
				}
			}
			.es-dropdownmenu-btn-register {
				padding: 0;
				text-align: right;
				margin-bottom: 5px;
			}
			#remember { //checkbox
				position: relative;
				top: 0;
			}
			li.item-social {
				background: @esToolbarItemSocialBackground;
				border-top: 1px solid @esBorder;
				border-bottom: 1px solid @esBorder;
				padding: 10px;
				margin-top: 5px;
			}
			.btn-es-facebook {
				text-align: center;
				// padding-left: 22px;

				.border-radius(2px);
				.buttonBackground(#5692ce, #2b6cb3, #fff, @btnEsTextShadow);
				&:before {
					display: none;
				}
				&:hover {
					text-decoration: none;
				}
			}
			.dropdown-menu-footer {
				text-align: left;
				font-size: 11px;
				margin-top: 5px;
				ul {
					li {
						padding: 2px 10px;
						i {
							font-size: 10px;
							color: @esToolbarDropdownFooterColor;
							&:before {
								top: 1px;
							}						
						}
						a {
							display: inline;
							padding-left: 0;
						}
					}
				}
			}
		}
	}


}