//
// Dropdown menus
// --------------------------------------------------

// The dropdown wrapper (div)
.dropdown-font-style(@size: @default-text-font-size, @color: @font-site-light-color) {
	color: @color;
	font-size: @size;
	font-style: normal;
	white-space: nowrap;
}

.dropdown {
	position: relative;
	float: right;
	background-color: transparent;
	border: 1px solid @border-color;
	margin-bottom: 20px;

	.dropdown-toggle {
		display: block;
		
		span {
			display: block;
			height: 25px;
			line-height: 24px;
			.dropdown-font-style();
			float: left;
			
			&.title {
				padding: 0 5px 0 14px;
				min-width: 160px;
			}
			
			&.arrows {
				.rel();
				width: 25px;
			}
		}
	}
}

// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
	outline: 0;
}

// The dropdown menu (ul)
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none; // none by default, but block on "open" of the menu
	float: left;
	min-width: 100%;
	padding: 5px 0;
	margin: 2px 0 0; // override default ul
	list-style: none;
	background-color: transparent;
	border: 1px solid @border-color;

	// Aligns the dropdown menu to right
	&.pull-right {
		right: 0;
		left: auto;
	}

	// Links within the dropdown menu
	> li > a {
		display: block;
		padding: 3px 20px;
		clear: both;
		.dropdown-font-style();
		
		&:hover {
			color: @main-site-light-color;
		}
	}
	
	// Hover/Focus state
	> li > a {
		&:hover,
			&:focus {
			text-decoration: none;
		}
	}

	// Active state
	> .active > a {
		&,
		&:hover,
			&:focus {
			text-decoration: none;
			outline: 0;
		}
	}
}

// Open state for the dropdown
.open {
	// Show the menu
	> .dropdown-menu {
		display: block;
	}

	// Remove the outline when :focus is triggered
	> a {
		outline: 0;
	}
}

.blog-top-block {
	padding: 0 10px;
	margin: 0 -5px 20px;
	> * {
		float: left;
		padding: 0 5px;
		margin-bottom: 20px;
	}
	.dfd-blog-page-icon {
		.rel();
		.block();
		width: 43px;
		height: 43px;
		padding: 0;
		margin-left: 5px;
		background: #e9e9e9;
		border: 2px solid #e9e9e9;
		.transition(background .3s ease);
		.rounded(50%);
		> span {
			.block();
			width: 2px;
			height: 2px;
			.abs();
			top: 50%;
			left: 50%;
			margin-top: -1px;
			margin-left: -1px;
			background: #363636;
			&:before,
			&:after {
				content: "";
				.block();
				width: 100%;
				height: 100%;
				.abs();
				top: 0;
				background: inherit;
			}
			&:before {
				right: 100%;
				margin-right: 2px;
			}
			&:after {
				left: 100%;
				margin-left: 2px;
			}
			&:first-child {
				margin-top: -5px;
			}
			&:last-child {
				margin-top: 3px;
			}
		}
		&:hover {
			background: transparent;
		}
	}
}

.click-dropdown {
	.rel();
	> a {
		.rel();
		.block();
		min-width: 250px;
		font-size: 13px;
		line-height: 43px;
		padding: 0 100px 0 20px;
		color: #2f2f2f;
		background: #e9e9e9;
		.rounded(43px);
		.box-shadow(0 5px 15px 0 transparent);
		.transform(perspective(0px));
		.transition(all .3s ease);
		&:before {
			content: "\e9c5";
			font-family: "dfd-socicons-font";
			font-size: 5px;
			text-align: center;
			overflow: hidden;
			.abs();
			top: 50%;
			right: 15px;
			width: 7px;
			height: 3px;
			line-height: 2px;
			margin-top: -.5em;
		}
		
		span {
			.hide();
			position: fixed;
			top: -3000px;
			bottom: -3000px;
			left: -3000px;
			right: -3000px;
			z-index: 5;
		}
	}
	> div {
		.abs();
		top: 0;
		left: 0;
		padding: 0;
		background: @white-color;
		min-width: 200px;
		height: auto;
		min-width: 280px;
		max-height: 100px;
		overflow: hidden;
		.rounded(4px);
		.opacity(0);
		visibility: hidden;
		z-index: 7;
		.box-shadow(0 15px 45px 0 rgba(0,0,0,.2));
		.transform(scaleY(.5) translateY(0));
		.transform-origin(50% 50%);
		.transition(all .3s ease-in-out);
		::-webkit-scrollbar {
			width: 3px;
			margin-right: 20px;
		}
		::-webkit-scrollbar-track {
			background-color: transparent;
			border: none;
		}
		::-webkit-scrollbar-thumb {
			height: 50px;
			background-color: fade(@black-color, 25%);
			border-radius: 5px;
		}
		::-webkit-scrollbar-thumb:hover {
			background-color: fade(@black-color, 80%);
		}
		ul {
			.rel();
			margin-bottom: 0;
			max-height: 600px;
			list-style: none;
			overflow-x: hidden;
			overflow-y: auto;
			&.category-filer {

				.icon-wrap {
					float: left;
					line-height: 3em;
					width: 30px;
					text-align: center;
					color: inherit;

					i {
						line-height: inherit;
						color: inherit;
						opacity: .4;
						&.none:before {
							content: "-";
							font-family: @default-text-font-family;
						}
					}
				}
				a {
					margin-left: 40px;
				}
				&.dfd-woo-page-filter {
					a {
						margin-left: 0;
					}
				}
			}
			li {
				overflow: hidden;
				line-height: 3em;
				padding: 0 10px;
				color: @title-color;
				background: transparent;
				border-bottom: 1px solid @border-color;
				.transition(~"background .3s ease-in-out, color .3s ease-in-out, border .3s ease-in-out");

				a {
					font-size: 13px;
					line-height: 3em;
					display: block;
					color: inherit;
				}
				&:last-child {
					border-bottom-width: 0;
				}
				&:hover {
					background: #e7e7e7;
				}
			}
			&.filter-authors,
			&.filter-tags {
				li {
					padding: 0 20px;
				}
			}
		}
	}
	&:hover {
		> a {
			background: @white-color;
			.transform(perspective(1200px));
			.box-shadow(0 10px 25px 0 fade(@black-color , 20%));
		}
	}
	&.active {
		> a {
			span {
				.block();
			}
		}
		> div {
			top: 0;
			height: auto;
			max-height: 600px;
			.opacity(1);
			visibility: visible;
			.transform(scaleY(1) translateY(-10%));
		}
	}
}

/*DropKick*/
.dk-select {
	.rel();
	.dk-selected {
		.rel();
		.block();
		font-size: 13px;
		height: 43px;
		line-height: 43px;
		padding: 0 40px 0 20px;
		color: #2f2f2f;
		background: #e9e9e9;
		cursor: pointer;
		.rounded(43px);
		.box-shadow(0 5px 15px 0 transparent);
		.transform(perspective(0px));
		.transition(all .3s ease);
		&:before {
			content: "\e9c5";
			font-family: "dfd-socicons-font";
			font-size: 5px;
			text-align: center;
			overflow: hidden;
			.abs();
			top: 50%;
			right: 15px;
			width: 7px;
			height: 3px;
			line-height: 2px;
			margin-top: -.5em;
		}
		&:hover {
			background: @white-color;
			.transform(perspective(1200px));
			.box-shadow(0 10px 25px 0 fade(@black-color , 20%));
		}
	}
	//ul,
	.dk-select-options {
		.abs();
		top: 0;
		left: 0;
		padding: 0;
		margin-bottom: 0;
		background: @white-color;
		min-width: 200px;
		height: auto;
		width: 100%;
		max-height: 200px;
		overflow: auto;
		.rounded(4px);
		.opacity(0);
		visibility: hidden;
		z-index: 7;
		.box-shadow(0 15px 45px 0 rgba(0,0,0,.2));
		.transform(scaleY(.5) translateY(0));
		.transform-origin(50% 50%);
		.transition(all .3s ease-in-out);
		&::-webkit-scrollbar {
			width: 3px;
			margin-right: 20px;
		}
		&::-webkit-scrollbar-track {
			background-color: transparent;
			border: none;
		}
		&::-webkit-scrollbar-thumb {
			height: 50px;
			background-color: fade(@black-color, 25%);
			border-radius: 5px;
		}
		&::-webkit-scrollbar-thumb:hover {
			background-color: fade(@black-color, 80%);
		}
		//li,
		.dk-option {
			overflow: hidden;
			padding: 0 20px;
			color: @title-color;
			background: transparent;
			border-bottom: 1px solid @border-color;
			.transition(~"background .3s ease-in-out, color .3s ease-in-out, border .3s ease-in-out");
			font-size: 13px;
			line-height: 3em;
			.block();
			&:last-child {
				border-bottom-width: 0;
			}
			&:hover {
				background: #e7e7e7;
			}
		}
	}
	&.dk-select-open-up,
	&.dk-select-open-down {
		.dk-select-options {
			visibility: visible;
			opacity: 1;
		}
	}
	&.dk-select-open-up .dk-select-options {.transform(scaleY(1) translateY(-70%));}
	&.dk-select-open-down .dk-select-options {.transform(scaleY(1) translateY(-10%));}
}

select[data-dkcacheid] {
	display: none;
}