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

/***************
Search-input.less
*****************/
.folded {
	#ecf-creator {
		.ecf-fields-wrapper {
			&.search-focussed {
				.ecf-search-wrapper {
					&.is-sticky {
						width: calc(~"100% - 36px") !important;	
					}
				}
			}
		}
	}
}

#ecf-creator {

	.ecf-page-trash {
		.ecf-search-wrapper {
			.ecf-search-input {
				.cancel {
					color: @primary;
				}
			}
		}
	}

	.ecf-fields-wrapper {

		&.search-focussed {

			.ecf-search-wrapper {	
				.ecf-search-input {
					.ecf-remove-search-value {
						right: 72px;
					}
				}
			}

			.ecf-search-wrapper {		
				&.is-sticky {
					.box-shadow(0 2px 25px fade(@black, 10));
					width: calc(~"100% - 160px") !important;	
					background-color: @white;
					position: fixed;
					top: 32px;
					z-index: 14;
					right: 0 !important;				
					padding: 15px;
					.ecf-search-input {
						input {
							color: @black;
							background: @grey_3;
							font-size: 18px;
							height: 42px;
							line-height: 42px;
							&:focus {
								background: @grey_2;
							}
						}
						.ecf-remove-search-value,
						.ecf-search {
							height: 40px;
						}
						.ecf-search {
							color: @accent;
						}
					}
				}
			}

		}

	}

	.dropdown-wrapper {
		.dropdown-holder {
			&.ecf-with-groups {
				.ecf-search-wrapper {
					border-width: 0;
				}
			}
		}
		.ecf-items-search {
			&.sticky {
				z-index: 2;
				& ~ div {
					h4.sticky {
						top: 54px;
					}
				}
			}
			& ~ div {
				h4.sticky {
					.roundedcorners(0) !important;
				}
			}			
		}
		.ecf-search-wrapper {
			background: @white;
			padding: 10px;
			visibility: visible;
			border-bottom: 1px solid @grey_2;
			.ecf-search-input {
				input, .ecf-search, .ecf-remove-search-value {
					height: 34px;
				}
				.ecf-search{
					ion-icon {
						font-size: 17px;
					}
				}
				input {
					.roundedcorners(7px);
					background: @grey_1;
					margin: 0;
					line-height: 34px;
					font-size: 15px;
					min-width: 100%;
					&:focus {
						background: @grey_2;
					}
				}
			}
		}
	}

	.ecf-field-types-wrapper {
		.fieldtype-search {
			&.sticky {
				top: 56px;
				z-index: 2;
			}
		}
		.ecf-search-wrapper {
			visibility: visible;
			padding: 0;
			background: @grey_1;
			.ecf-search-input {
				input, .ecf-search, .ecf-remove-search-value {
					height: 40px;
				}
				input {
					background: fade(@grey_3, 70%);
					.roundedcorners(0);
					margin: 0;
					line-height: 40px;
					font-size: 15px;
					&:focus {
						background: @grey_3;
					}
				}
			}
		}
	}

	.ecf-search-wrapper {
		position: relative;		
		width: auto;
		.ecf-d-flex {
			justify-content: flex-end;
		}
		.ecf-search-input {
			position: relative;
			.cancel {
				.flex();
				color: @accent;
				margin-left: 15px;
				font-weight: 600;
				padding: 0;
				border-radius: 7px;
				height: 42px;
				align-items: center;
				font-size: 17px;
			}
			input {
				.placeholder(@text_1);
				.transition(background-color, 0.25s, ease);
				.roundedcorners(8px);
				.box-shadow(none);
				background-color: @grey_2;
				border-width: 0; 
				position: relative;
				height: 52px;
				line-height: 52px;
				padding: 0 20px 0 40px;
				font-size: 17px;
				font-weight: 500;
				width: 100%;
				min-width: 300px;
				overflow: hidden;
				&:focus, &:active, &:focus-visible {
					outline: none;
					.box-shadow(none);
					background-color: @grey_2;
				}
			}
			.ecf-remove-search-value,
			.ecf-search {
		    .flex();
		    color: @text_2;
		    position: absolute;
		    right: 0;
		    top: 0;
		    height: 52px;
		    align-items: center;
		    width: 46px;
        justify-content: center;
        ion-icon {
        	font-size: 20px;
        }
		  }
		  .ecf-remove-search-value {
		  	> span {
		  		height: 20px;
		  	}
		  }
		  .ecf-search {
		  	color: @text_2;
		  	position: absolute;
		  	right: auto;
		  	left: 0;
		  	z-index: 1;
		  }
		}
	}
}

@media (max-width: 500px) {

	.folded #ecf-creator, #ecf-creator {
		.ecf-fields-wrapper {
			&.search-focussed {
				.ecf-search-wrapper {
					&.is-sticky {
						padding: 10px;
						width: 100% !important;	
					}
				}
			}
		}
	}

	#ecf-creator {
		.search-focussed {
			.ecf-search-wrapper {
				.ecf-search-input {
					max-width: unset;
				}
			}
		}
		.ecf-search-wrapper {
			.ecf-search-input {
				max-width: 100% !important;
				.ecf-search {
					height: 40px;
				}
				input {
					height: 40px;
					line-height: 40px;					
					min-width: 100px;
					font-size: 16px;
				}
			}
		}
	}
}