@import '../../variables.less';
@import '../../mixins.less';

/**********************
real-fields/dropdown-field.less
*************************/

.ecf-output-fields-wrapper {

	.ecf-options {
		.translate(0, -50%);
		position: absolute;
		height: auto;
		right: 56px;
		top: 64%;
		z-index: 2;

		.ecf-field.ecf-dropdown-field {
			background: transparent;
			padding: 0;
			border-width: 0;

			.ecf-dropdown-wrapper {

				.ecf-selectbox {
					border-width: 0;
					background: transparent;
					height: 44px;
					width: 24px;
				}

				.ecf-dropdown-holder {
					width: 220px;
					right: 0;
			    left: auto;

					.ecf-items-holder > ul li {
						padding: 7px 15px 7px;
						border-bottom: 1px solid @grey_1;

						&:last-child {
							border-width: 0;
						}

						span[class*="ecf-icon-"] {
							position: absolute;
							right: 20px;
							font-size: 17px;
							
							&.ecf-icon-trash {
								color: @danger;
							}
						}
					}
				}
			}
		}
	}

	.ecf-field.ecf-dropdown-field {

		&.ecf-open {
			.ecf-overlay {
				position: absolute;
				left: -2000px;
				right: -2000px;
				top: -200px;
				bottom: -200px;
				z-index: 10;
				cursor: auto;
			}
		}

		.ecf-input-wrapper {
			.ecf-icon-holder {
				&.ecf-remove-text {
					top: 0;
				}
			}
		}

		.ecf-dropdown-wrapper {
			position: relative;

			.ecf-selectbox {
				.roundedcorners(5px);
				border: 1px solid @grey_1;
				background: @grey_1;
				height: 40px;
				cursor: pointer;
				.ecf-icon-holder {
					color: @text_1;
					top: 0;
					width: 57px;
					> span {
						font-size: 17px;
						width: 17px;
				    height: 17px;			    
					}					
				}
				.ecf-placeholder {
					.flex();
					color: @text_1;
					height: 38px;
					align-items: center;
					padding: 0 15px;
					white-space: nowrap;

					> strong {
						margin-right: 3px;

						&.ecf-end {
							margin-left: 3px;
							overflow: hidden;
					    text-overflow: ellipsis;
					    padding-right: 23px;
						}
					}
					&.ecf-has-value {
						color: @text_2;
						> strong {
							color: @text_2;
						}
					}
				}

			}
			.ecf-dropdown-holder {
				.roundedcorners(10px);
				.box-shadow(0 0 30px 2px fade(@black, 10));
				transform-origin: calc(~"100% - 25px") top;
		    border: 1px solid @grey_3;
		    background: @white;
		    padding-top: 1px;
		    height: 300px;
		    position: absolute;
		    left: 0;
        width: 100%;
        z-index: 11;
        display: none;
        overflow: hidden;
        
        &:before {
        	content: '';
        	border-color: transparent transparent @white transparent; 
        	border-width: 0 10px 10px 10px;
        	border-style: solid;
        	position: absolute;
        	bottom: 100%;
        	right: 17px;
        }
		    .ecf-search-wrapper {
		    	.roundedcorners(10px 10px 0 0);
		    	background: @white;
		    	border-bottom: 1px solid @grey_2;
		    	padding: 10px;
		    	position: relative;
		    	z-index: 2;
		    	&.ecf-grouped-list {
		    		border-bottom-width: 0;
		    	}
		    	&.ecf-sticky {
		    		& + .ecf-items-holder {
		    			h4 {
		    				top: 59px !important;
		    			}
		    		}
		    	}
		    	&.ecf-has-keyword {
		    		.ecf-icon-cross {
		    			.flex();
		    			cursor: pointer;
		    		}
		    	}
		    	.ecf-icon-search,
		    	.ecf-icon-cross {
		    		.flex();
		    		.translate(0, -50%);
		    		color: @text_2;
		    		position: absolute;
		    		top: 50%;
		    		left: 22px;
		    		z-index: 1;
		    		font-size: 16px;
		    		height: 40px;
		    		align-items: center;
		    	}
		    	.ecf-icon-cross {
		    		left: auto;
		    		height: 38px;
		    		width: 40px;
		    		display: flex;
		    		align-items: center;
		    		right: 0;
		    		font-size: 18px;
		    		display: none;
		    	}
		    	.ecf-form-control {
		    		padding-left: 35px;
		    		&:focus {
		    			.box-shadow(none);
		    			background: @grey_2;
		    		}
		    	}
		    }
		    .ecf-items-holder {
		    	h4 {
		    		color: @text_1;
		    		background: @grey_1;
		    		border: 1px solid @grey_2;
		    		border-width: 1px 0;
		    		padding: 5px 15px;
		    		margin: 0;
		    		font-weight: 600;
		    		font-size: 14px;
		    		z-index: 1;
		    	}
		    	> ul {
		    		margin: 0;
		    		&.ecf-simple-list {
		    			padding: 10px 0;
		    		}
		    		li {
		    			padding: 5px 15px 5px 35px;
		    			margin: 0;
		    			cursor: pointer;
    			    border-left: 2px solid transparent;
    			    position: relative;

		    			&.ecf-hover {
		    				border-color: @primary;
		    				background: @grey_0;
		    			}

		    			&:hover {
		    				background: @grey_0;
		    			}

		    			mark {
		    				font-weight: 600;
		    			}

		    			&.ecf-item-placeholder {
		    				.opacity(0.7);
		    				color: @text_1;
		    				cursor: default;
		    			}

		    			.check-outline {
		    				color: @accent;
		    				position: absolute;
    				    left: 10px;
    				    font-size: 19px;
    				    top: 5px;
    				    svg {
    				    	width: 17px;
    				    }
		    			}
		    		}
		    		ul {
		    			padding: 10px 0;
		    		}
		    	}
		    }
			}
		}
		
	}


	&.ecf-xs {
		.ecf-field.ecf-dropdown-field {
			.ecf-dropdown-wrapper {
				.ecf-selectbox {
					.ecf-placeholder {

					}
				}
			}
		}
	}

}