.dropdown {
	&-toggle {
		&.open {
			+ .dropdown-menu, .dropdown-menu {
				 display: block;
			}
		}
	}

	&.open {
		overflow: visible !important;

		.dropdown-menu {
			background-color: @dropdown-color !important;

			a {
				text-indent: 0 !important;
			}
		}
	}
}

.dropdown-submenu {
	> a {
		&::after {
			.font-icon-reset();
			content: @fa-legacy-var-caret-down;
			float: none;
			position: absolute;
			top: 13px;
			margin: 0;
			right: 30px;
			border: 0 none !important;
		}
	}
	&:hover {
		>.dropdown-menu {
			display: none;
		}
	}
	&.open {
		.dropdown-menu {
			display: block !important;
		}
		> a {
			&:after {
				content: @fa-legacy-var-caret-up !important;
			}
		}
	}
}

.dropdown-menu {
	.border-radius(0);
	.transform(translateZ(0));

	background: @dropdown-color;
	color: @dropdown-color-text;
	border: 1px solid @dropdown-divider-color !important;

	margin-top: 10px;
	padding: (@dropdown-gutter / 3) 0;
	max-width: 100vw;

	@media (max-width: 300px) {
		width: 90vw;
		min-width: 0 !important;
	}

	&:after {
		display: none;
	}

	li {
		p {
			.rem(font-size, 14);
			.rem(line-height, 25);

			float: none;
			color: inherit;
			margin: 0;
			padding: 0 @dropdown-gutter;
		}

		a {
			color: @dropdown-color-text;
			.rem(font-size, 15) !important;
			width: 100%;
			.box-sizing(border-box);

			padding: 0 @dropdown-gutter;
			.rem(line-height, 40);

			i {
				color: inherit;
			}

			&:hover, &:focus {
				color: @dropdown-color-text;
				background: @dropdown-color;
			}
			&:active {
				background: darken(@dropdown-color, 15%);
			}
		}
	}

	.dropdown-menu {
		position: static;
		z-index: 0;
		margin: 0;
		float: none;
		border: 0 none !important;
		padding: 0;

		&:before {
			display: none;
		}

		@media (max-width: 300px) {
			width: auto;
		}
	}

	&:before {
		right: 6vw;
		top: -20px;
		border-left-width: 10px;
		border-right-width: 10px;
		border-bottom-width: 10px;
		border-bottom-color: @dropdown-color !important;
	}

	.btn {
		background: darken(@btn-main-background, 5%);

		&:active {
			background: darken(@btn-main-background, 15%);
		}
	}

	.divider {
		margin: (@dropdown-gutter / 3) 0;
		background-color: @dropdown-divider-color;
		border: 0 none;
	}

	&:before {
		content: "";
		border: 10px solid transparent;
		border-bottom-color: @dropdown-color;
		position: absolute;
		top: -18px;
		right: 43px;
	}
}
