@import '../../variables.less';
@import '../../mixins.less';
/***************
dropdown.less
*****************/
body.folded {
	#ecf-creator {
		.header-sticky {
			.dropdown-wrapper {	
				&.inner-page {
					left: 75px !important;
				}
			}
		}
	}
}

#ecf-creator {
	.header-sticky {
		.dropdown-wrapper {	 
			&.small {
				.dropdown-wrapper-inner {
			
				}
			}   
	    &.inner-page {
	    	top: 45px !important;
	    	position: fixed;
	    	left: 200px !important;
	    	.dropdown-wrapper-inner {
	    		> label {
	    			top: 3px;
	    			display: none;
	    		}
	    		.select-box {
  			    line-height: 31px;
  			    height: 37px;
  			    font-size: 32px;
  			    span.caret-icon {
  			    	top: 4px;
  			    }
	    		}
	    	}
	    }
		}
	}
	.ecf-page-trash {
		.dropdown-wrapper {
			&.inner-page {
				&.simple-page-title {
					.dropdown-wrapper-inner {
						> label {
							color: @text_2;
						}
						.select-box {
							color: @black;
						}
					}
				}
				.dropdown-wrapper-inner {
					.select-box {
						color: @text_2;
						> span {
							color: @black;
							&.caret-down {
								color: @black;
							}
						}
					}
				}
			}
			&.small {
				.dropdown-wrapper-inner {
					.info-icon-wrapper, .ecf-loader, .clear {
						display: none;
					}
				}
			}
		}
	}
	.dropdown-wrapper {
		position: absolute;
		left: calc(~"50% - 175px");		
		top: 200px;
		z-index: 11;
		mark {
			// color: @primary;
			// text-decoration-color: fade(@primary, 50%);
		}
		&.small {
			position: relative;
	    left: 0;
	    top: 0;	    
	    z-index: unset;
	    &.with-icons {
	    	.dropdown-wrapper-inner {
	    		.dropdown-holder {
	    			ul {
	    				padding: 0 !important;
	    				li {
	    					border-width: 1px 0 0;
	    					border-style: solid;	    					
	    					border-color: @grey_2;
	    					&:first-child {
	    						border-width: 0;
	    					}
	    					&.ecf-item-delete {
	    						> a {
	    							color: @danger;
	    							ion-icon {
	    								color: @danger;
	    							}
	    						}
	    					}
	    					a {
	    						color: @text_3;
	    						padding: 8px 0 8px 20px;
	    						span {
	    							position: absolute;
	    							right: 20px;
	    							top: 7px;
  							    font-size: 18px;  							    
	    							&.ecf-icon-trash, &.delete {
	    								color: @danger;
	    								svg {
	    									fill: @danger;
	    								}
	    							}
	    						}
	    					}
	    				}
	    			}
	    		}
	    	}
	    }
	    &.style-options {
	    	.dropdown-wrapper-inner {
	    		.dropdown-holder {
	    			transform-origin: 190px top !important;
	    			&:before {
	    				right: 20px;
	    				border-width: 0 7px 7px 7px;
	    			}
	    			ul {
	    				li {
	    					&.delete {
	    						a {
	    							color: @danger;
	    						}
	    					}	 
	    				}
	    			}
	    		}
	    	}
	    }
			.dropdown-wrapper-inner {
				.info-icon-wrapper {	
					visibility: hidden;	    
					position: absolute;
					right: 37px;
					font-size: 20px;
					top: 0;
					height: 50px;
					padding-top: 16px;
					width: 40px;
					text-align: center;
					&:hover {
						.opacity(0.75) !important;
					}
					.info {
						.transition(all, 0.20s, ease);
						color: @primary;
						font-size: 18px;
						top: 15px;
					}
				}
				.item-info {
					color: @text_2;
					position: absolute;
					visibility: hidden;
					font-size: 13px;
					width: max-content;
				}
				.ecf-loader {
					position: absolute;
			    top: 11px;
			    right: 37px;
			    font-size: 20px !important;
			    height: 20px;
			    color: @text_2;
			    cursor: pointer;
			    > span {
			    	.flex();
			    	height: 20px;
			    }
				}
				.select-box {
					.roundedcorners(7px);
					color: @text_1;			
			    word-break: break-all;
			    width: 100%;
					min-width: 200px;
					height: 50px;
					line-height: 50px;
					font-size: 16px;
					padding-right: 80px;	
					font-weight: 500;
					> div {
						font-weight: 500;						
					}
					span.caret-down {
						color: @text_1;
						top: 2px;
				    right: 13px;
				    position: absolute;
				    font-size: 14px;
					}
					&:after {
						content: none;
						right: 22px;
						border-width: 6px 6px 0 6px;
						top: calc(~"50% - 3px");
					}
					label {
						color: @text_2;
					}
					span {
						font-weight: 600;
						color: @text_3;
						&.danger {
							color: @danger;
						}
						&.ecf-text1 {
							color: @text_1;
						}
					}
				}
				.ecf-selected-items {
					.flex();
					flex-wrap: wrap;
					padding: 5px 0 0;
					margin: 0 -5px;
					overflow: hidden;
					a {
						background-color: @white;
						color: @text_3;
						.box-shadow(0 2px 0 fade(@black, 5));
						border: 1px solid @grey_2;
						padding: 4px 26px 4px 9px;
						margin: 5px;
						border-radius: 5px;
						font-size: 14px;
						position: relative;
						z-index: 1;
						font-weight: 500;
						text-transform: capitalize;
						> span {
							color: @text_1;
						}
						.cross {
							color: @text_1;
							position: absolute;
							right: 4px;
							top: 4px;
							ion-icon {
								font-size: 18px;
							}
						}
					}
				}
				.dropdown-holder {
					transform-origin: calc(~"100% - 25px") top;
					ul {
						padding: 10px 0 !important;
						li {
							> a {
								text-transform: none;
							}
						}
					}
				}
				.clear {
					.translate(0, -50%);
					visibility: hidden;
					position: absolute;
					right: -40px;
					top: 50%;
			    z-index: 2;
				}
			}
		}
		&.is-open {
			.dropdown-wrapper-inner {
				> label {
					color: @text_3;
				}
				.select-box {
					&:after {
						// border-color: @grey_2 transparent transparent transparent; 
					}
				}
				.ecf-loader {
			    z-index: 11;
				}
			}
		}
		&.inner-page {
			top: -13px;
			left: 0;
			&.simple-page-title {
				.dropdown-wrapper-inner {
					> label { 
						color: @primary;
						text-transform: capitalize;
					}
					.select-box {
						&:active {
							background-color: transparent;
						}
						&:after {
							display: none;
						}
					}
				}
			}
			.dropdown-wrapper-inner {
				max-width: 100%;
				> label { 
					font-weight: 600;
					letter-spacing: 0.4px;
					text-transform: uppercase;
					top: 0;
					font-size: 20px;
				}
				.select-box {
					background-color:  transparent;
					line-height: 38px;
					height: 44px;
					padding: 0 50px 0 0;
					font-size: 40px;
					min-width: inherit;
					font-weight: 700;
					font-kerning: normal;
					&:after {
						border-color: @primary transparent transparent transparent; 
					}
					span.caret-down {
						top: 5px;
						font-size: 23px;
						color: @primary;
					}
				}
			}
		}
		.dropdown-wrapper-inner {
			max-width: 600px;
			min-width: auto;
			position: relative;
			> label {
				.transition(all, 0.25s, ease);
				color: @text_2;
				font-weight: 500;
				font-size: 18px;
				position: relative;
				left: 2px;
				top: -5px;
			}
			.select-box {
				.transition(all, 0.15s, ease);
				.roundedcorners(10px);
				color: @black;
				background-color: @grey_2;
				position: relative;
				height: 60px;
				line-height: 60px;
				padding: 0 50px 0 20px;
				font-size: 24px;
				font-weight: 600;
				min-width: 350px;
				overflow: hidden;
				text-transform: capitalize;
				&:active {
					background-color: @grey_3;
				}
				div {
					font-weight: 600;					
				}				
				span.caret-down {
			    top: 3px;
			    right: 16px;
			    position: absolute;
			    color: @text_2;
			    font-size: 20px;
			    height: 30px;
				}
				&:after {
					.roundedcorners(5px);
					.transition(all, 0.25s, ease);
					content: none;
					border-color: @text_1 transparent transparent transparent; 
					border-width: 8px 8px 0 8px;
					border-style: solid;
					position: absolute;
					top: calc(~"50% - 4px");
					right: 20px;
				}
			}
			.dropdown-holder {
				.roundedcorners(10px);
				.box-shadow(0 0 30px 2px fade(@black, 10));
				border: 1px solid @grey_2;
				background-color: @white;
				transform-origin: calc(~"100% - 17px") top;
				right: 0;
				position: absolute;
				max-width: 100%;
				padding-top: 1px;
				visibility: hidden;
				width: 100%;
				z-index: 11;
				> div {
					overflow: hidden;
					.roundedcorners(10px);					
				}
				.scrollbar {
					> div {
						overflow-x: hidden !important;						
						&:first-child {
							margin-bottom: 0 !important;
							max-height: inherit !important;
							min-height: inherit !important;
						}
						&:last-child {
							z-index: 2;
						}
					}
				}
				&:before {
					content: '';
					border-color: transparent transparent @white transparent; 
					border-width: 0 10px 10px 10px;
					border-style: solid;
					position: absolute;
					bottom: 100%;
					right: 17px;
				}
				h4 {
					border: 1px solid @grey_2;
					border-width: 1px 0;
					background-color: @grey_1;
					color: @text_1;
					margin: 0;
					padding: 7px 15px 7px 30px;
					text-transform: capitalize;
					font-weight: 600;
					z-index: 1;
					font-size: 14px;
					&.first {
						.roundedcorners(10px 10px 0 0);
					}
				}
				ul {
					padding: 10px 0;
					margin: 0;
					li {
						margin: 0;							
						overflow: hidden;
						position: relative;
						border-width: 0;
						&.ecf-item-is-disabled {
							.opacity(0.4);
						}
						&.ecf-item-no-items {
							> a {
								color: @text_1;
								&.ecf-hover {
									background-color: transparent;
									border-left-color: transparent;
								}
							}
						}
						> a {
							.transition(all, 0.25s, ease);
							color: @text_3;		
							display: block;				
							font-size: 14px;
							font-weight: 500;
							padding: 5px 5px 5px 30px;
							border-left: 2px solid transparent;
							text-transform: capitalize;
							text-decoration: none;
							.ecf-text1 {
								color: @text_1;
							}
							&:hover, &.ecf-hover {
								background-color: @grey_0;
							}
							&.ecf-hover {
								border-left-color: @primary;
							}
							&:active {
								background-color: @grey_1;
							}
							> .total-fields {
								.translate(0, -50%);
								color: @text_1;
								position: absolute;
								right: 10px;
								top: 50%;
								text-transform: lowercase;
							}
							.icon {								
								position: absolute;
								left: 6px;
								top: 7px;
								svg {
									width: 17px;
									color: @accent;
								}
							}								
						}				
					}
				}
			}
		}
		
	}
}

@media (max-width: 1350px) {

	#ecf-creator {
		.header-sticky {
			.dropdown-wrapper {
				&.inner-page {
					left: 174px !important;
				}
			}
		}
	}

	body.folded {
		#ecf-creator {
			.header-sticky {
				.dropdown-wrapper {
					&.inner-page {
						left: 50px !important;
					}
				}
			}
		}
	}
	
}

@media (max-width: 1023px) {

	body.folded, body.auto-fold {
		#ecf-creator {
			.header-sticky {
				.dropdown-wrapper {
					&.inner-page {
						left: 55px !important;
					}
				}
			}
		}
	}

}

@media (max-width: 782px) {

	body.folded, body.auto-fold {
		#ecf-creator {
			.header-sticky {
				.dropdown-wrapper {
					&.inner-page {
						left: 10px !important;
						top: 60px !important;
					}
				}
			}
		}
	}
}

@media (max-width: 600px) {

	body.folded, body.auto-fold {
		#ecf-creator {
			.header-sticky {
				.dropdown-wrapper {
					&.inner-page {
						top: 13px !important;
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {

	body.folded {
		#ecf-creator {
			.header-sticky {
				.dropdown-wrapper {
					&.inner-page {
						left: 10px !important;
					}
				}
			}
		}
	}

	#ecf-creator {

		.header-sticky {
			.dropdown-wrapper {
				&.inner-page {
					left: 10px !important;
					top: 15px !important;
					.dropdown-wrapper-inner {
				    max-width: calc(~"100% - 19px");
						.select-box {
							.roundedcorners(0);
					    font-size: 18px;
						}
					}					
				}
			}
		}

		.dropdown-wrapper {
			&.inner-page {
				min-width: 280px;
				max-width: calc(~"100% - 50px");
				.dropdown-wrapper-inner {	
					text-overflow: ellipsis;	
					padding: 0;			
					> label {
						display: block;
						top: 5px;
						font-size: 14px;
						font-weight: 500;
					}
					.select-box {
						overflow: hidden;
						display: inline-block;
						white-space: nowrap;
				    text-overflow: ellipsis;
						line-height: 28px;
						height: 34px;
						font-size: 19px;
						padding-right: 30px;
						max-width: 100%;
						span.caret-down {
					    font-size: 16px;
					    top: 3px;
					    right: 10px;
						}
					}
					.dropdown-holder:before {
						display: none;
					}
				}
			}
			.dropdown-wrapper-inner {
			 	.dropdown-holder ul li > a {
			 		padding: 7px 0 7px 30px;
			 	}
			}
		}
	}
}