.dropdown {
	.dropdownToggle:active,
	&.dropdownOpen .dropdownToggle {
		outline: 0;
	}
	
	&.preInput {
		display: table;
		width: 100%;
		
		input {
			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius 0;
			display: table-cell;
			margin: 0;
			width: 99%;
		}
		
		textarea {
			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius;
			display: block;
			margin-top: 0;
		}
		
		.dropdownCaption {
			cursor: pointer;
			display: table-cell;
			letter-spacing: -1px;
			padding: 0 @wcfGapSmall 0 @wcfGapTiny;
			vertical-align: middle;
			width: 1%;
			
			&.button {
				border-right-width: 0;
				border-radius: @wcfInputBorderRadius 0 0 @wcfInputBorderRadius;
			}
			
			span {
				margin-right: -1px;
				padding-left: @wcfGapTiny;
				white-space: nowrap;
				word-wrap: normal;
				
				&.active::after {
					content: "\f0d7";
					font-family: FontAwesome;
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}
		
		.dropdownCaptionTextarea {
			cursor: pointer;
			margin: 0 0 -1px 0;
			padding-left: @wcfGapSmall;
			padding-right: @wcfGapSmall;
			
			&.button {
				border-radius: @wcfInputBorderRadius @wcfInputBorderRadius 0 0;
			}
			
			&~ .dropdownMenu {
				top: 10%;
			}
			
			span {
				white-space: nowrap;
				word-wrap: normal;
				
				&.active::after {
					content: "\f0d7";
					font-family: FontAwesome;
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}
	}
	
	&.dropdownOpen {
		.dropdownToggle {
			//color: @wcfPageLinkHoverColor;
		}
		
		.dropdownMenu {
			display: block;
		}
	}
	
	.dropdownToggle {
		cursor: pointer;
	}
}

.dropdownMenu {
	background-color: @wcfDropdownBackgroundColor;
	border: 1px solid @wcfDropdownBorderColor;
	color: @wcfDropdownColor;
	display: none;
	float: left;
	min-width: 160px;
	padding: 4px 0;
	position: absolute;
	text-align: left;
	z-index: 450;
	
	.boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
	
	&::after {
		border: 7px solid transparent;
		border-bottom-color: @wcfDropdownBorderColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 9px;
		position: absolute;
		top: -7px;
		z-index: 100;
	}
	
	&::before {
		border: 6px solid transparent;
		border-bottom-color: @wcfDropdownBackgroundColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 10px;
		position: absolute;
		top: -6px;
		z-index: 101;
	}
	
	&.dropdownArrowRight {
		&::after {
			left: auto;
			right: 9px;
		}
		
		&::before {
			left: auto;
			right: 10px;
		}
	}
	
	&.dropdownArrowBottom {
		&::after {
			border: 7px transparent solid;
			border-top-color: @wcfDropdownBorderColor;
			border-bottom-width: 0;
			bottom: -7px;
			top: auto;
		}
		
		&::before {
			border: 6px transparent solid;
			border-top-color: @wcfDropdownBackgroundColor;
			border-bottom-width: 0;
			bottom: -6px;
			top: auto;
		}
	}
	
	&.dropdownOpen {
		display: block;
	}
	
	li {
		display: block;
		
		&:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
		&.dropdownList > li:hover:not(.dropdownDivider),
		&.dropdownNavigationItem,
		&.active {
			background-color: @wcfDropdownHoverBackgroundColor;
		}
		
		&.dropdownDivider {
			border-top: 1px dotted @wcfDropdownBorderColor;
			margin: @wcfGapTiny;
		}
		
		&.dropdownText {
			font-size: @wcfSmallFontSize;
			padding: @wcfGapTiny @wcfGapMedium;
		}
		
		&.boxFlag {
			padding-top: 2px;
		}
		
		> a,
		> span {
			clear: both;
			color: @wcfDropdownColor;
			cursor: pointer;
			display: block;
			max-width: 350px;
			overflow: hidden;
			padding: @wcfGapTiny @wcfGapMedium;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
			
			.textShadow(@wcfDropdownBackgroundColor);
			
			&:hover {
				color: @wcfDropdownColor;
				
				.textShadow(@wcfDropdownHoverBackgroundColor);
			}
			
			> div > h3 {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		> a > small {
			display: block;
		}
		
		> a + span.badge {
			display: none;
		}
		
		> .box16 {
			cursor: pointer;
			min-height: 0;
			padding: @wcfGapTiny @wcfGapTiny @wcfGapTiny @wcfGapSmall;
			
			> div {
				margin-left: 21px;
			}
		}
		
		> label {
			display: block;
		}
		
		.containerHeadline {
			margin-bottom: 0;
			
			> p {
				font-size: @wcfSmallFontSize;
			}
		}
	}
	
	.scrollableDropdownMenu {
		max-height: 300px;
		overflow: auto;
	}
}

.boxFlag > .box24, .boxFlag.box24 {
	min-height: 20px;
}

@media only screen and (max-width: 800px) {
	.dropdownMenu {
		left: 0 !important;
		right: 0 !important;
		
		li {
			overflow: hidden;
			
			> a,
			> span {
				max-width: none;
				white-space: normal;
			}
		}
	}
}

.interactiveDropdown {
	background-color: @wcfContainerAccentBackgroundColor;
	border: 1px solid @wcfDropdownBorderColor;
	color: @wcfDropdownColor;
	display: block;
	position: absolute;
	z-index: 450;
	
	.boxShadow(0, 3px, rgba(0, 0, 0, .25), 8px);
	
	&:not(.open) {
		display: none !important;
	}
	
	> .interactiveDropdownHeader {
		padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
		
		> .interactiveDropdownTitle {
			font-weight: bold;
		}
		
		> .interactiveDropdownLinks {
			float: right;
			
			> li {
				display: inline-block;
				margin-left: (@wcfGapSmall + @wcfGapTiny);
			}
		}
		
		&:after {
			clear: both;
		}
	}
	
	> .interactiveDropdownItemsContainer {
		border: 1px solid @wcfDropdownBorderColor;
		border-width: 1px 0;
		max-height: 300px;
		
		&.ps-container {
			> .interactiveDropdownItems {
				position: relative;
				z-index: 100;
			}
			
			> .ps-scrollbar-y-rail {
				z-index: 200;
			}
		}
		
		> .interactiveDropdownItems {
			> li {
				background-color: @wcfDropdownBackgroundColor;
				
				.transition(~"background-color, background-position", .3s, linear);
				
				&.loading,
				&.noItems {
					font-size: 1.2rem;
					padding: @wcfGapLarge @wcfGapMedium;
					text-align: center;
				}
				
				&:not(.loading):not(.noItems) {
					overflow: hidden;
					padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
					position: relative;
					
					.textShadow(@wcfContainerAccentBackgroundColor);
					
					&:not(:last-child) {
						border-bottom: 1px solid @wcfDropdownBorderColor;
					}
					
					&:hover {
						background-color: @wcfDropdownHoverBackgroundColor;
					}
					
					&.interactiveDropdownItemOutstanding {
						background-color: @wcfDropdownHoverBackgroundColor;
						background-repeat: no-repeat;
						background-size: 200%;
						
						.linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%");
						
						&:hover {
							background-position: 100%;
						}
					}
					
					&.interactiveDropdownItemOutstandingIcon > div.box32 {
						padding-right: 16px + (@wcfGapSmall + @wcfGapTiny);
					}
					
					&.notificationItem {
						.userLink {
							font-weight: bold;
						}
					}
					
					&.interactiveDropdownItemShadow {
						> .box32 {
							position: relative;
						}
						
						> .box32,
						> .interactiveDropdownItemMarkAsRead {
							pointer-events: none;
							z-index: 20;
							
							a {
								pointer-events: all;
							}
						}
						
						> .interactiveDropdownItemShadowLink {
							bottom: 0;
							left: 0;
							position: absolute;
							right: 0;
							top: 0;
							z-index: 10;
						}
					}
					
					&.groupedNotificationItem > .box32 > .framed > span.fa-users:before {
						position: relative;
						top: 3px;
					}
				}
			}
			
			&.interactiveDropdownItemsUserMenu {
				> li {
					&.dropdownDivider {
						padding: 0 !important;
					}
					
					&:not(.dropdownDivider) {
						border-bottom-width: 0 !important;
						padding: (@wcfGapSmall + @wcfGapTiny);
					}
					
					> .box32 > .containerHeadline {
						> h3 {
							font-size: 1.1rem;
						}
					}
					
					> .box64 {
						position: relative;
						
						> .containerHeadline > .interactiveDropdownUserMenuLinkList {
							bottom: 0;
							position: absolute;
						}
					}
					
					.interactiveDropdownUserMenuLinkList > li {
						display: inline-block;
						font-size: .85rem;
						
						&:after {
							content: " \2013 ";
						}
						
						&:last-child:after {
							content: "";
						}
					}
				}
			}
		}
	}
	
	> .interactiveDropdownShowAll {
		display: block;
		padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
		text-align: center;
	}
	
	> .pointer {
		border: 10px solid transparent;
		border-bottom-color: @wcfDropdownBorderColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		position: absolute;
		top: -10px;
		z-index: 100;
		
		> span {
			border: 8px solid transparent;
			border-bottom-color: @wcfContainerAccentBackgroundColor;
			border-top-width: 0;
			content: "";
			display: inline-block;
			left: -8px;
			position: absolute;
			top: 2px;
			z-index: 101;
		}
	}
	
	&.interactiveDropdownUserMenu {
		> .interactiveDropdownItemsContainer {
			overflow: visible;
			max-height: none;
		}
		
		> .pointer {
			border-width: 0 7px 7px 7px;
			top: -7px;
			
			> span {
				border-width: 0 5px 5px 5px;
				left: -5px;
			}
		}
	}
}

@media only screen and (min-width: 801px) {
	.interactiveDropdown {
		min-width: 350px;
		
		> .interactiveDropdownItemsContainer {
			overflow: hidden;
			position: relative;
			
			> .interactiveDropdownItems > li:not(.loading) {
				max-width: 400px;
				box-sizing: border-box;
				
				&.interactiveDropdownItemOutstandingIcon {
					> div.interactiveDropdownItemMarkAsRead {
						opacity: .6;
						position: absolute;
						right: (@wcfGapSmall + @wcfGapTiny);
						top: 50%;
						
						transform: translateY(-50%);
						-ms-transform: translateY(-50%);
						-webkit-transform: translateY(-50%);
						
						.transition(opacity, .3s, linear);
					}
					
					&:hover > div.interactiveDropdownItemMarkAsRead {
						opacity: 1;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 800px) {
	.interactiveDropdown {
		border-width: 1px 0;
		box-sizing: border-box;
		left: 0 !important;
		right: 0 !important;
		width: 100%;
		
		> .interactiveDropdownItemsContainer {
			overflow-x: auto;
			
			> .interactiveDropdownItems > li.interactiveDropdownItemOutstandingIcon > div.interactiveDropdownItemMarkAsRead {
				bottom: 0;
				position: absolute;
				right: 0;
				top: 0;
				width: (@wcfGapSmall + @wcfGapTiny) + 16px + (@wcfGapSmall + @wcfGapTiny);
				
				> a {
					display: block;
					height: 100%;
					text-align: center;
					
					> .icon {
						position: relative;
						top: 50%;
						
						transform: translateY(-50%);
						-ms-transform: translateY(-50%);
						-webkit-transform: translateY(-50%);
					}
				}
			}
		}
	}
}