@import '../variables.less';
@import '../mixins.less';
/**********************
location-page.less
*************************/
body.folded {
	#ecf-creator {
		.header-sticky {
			.ecf-location-page {	
				.ecf-location-page-header {
					left: 36px;
					width: calc(~"100% - 36px");
				}
			}
		}
	}
}

#ecf-creator {
	.header-sticky {

		.ecf-in-trash-title {
			position: fixed;
			z-index: 15;
			top: 50px;
			left: calc(~"50% + 28px");
			.opacity(1);
			visibility: visible;
			& + p {
				.opacity(1);
			}
		}

		&.search-focussed {
			.ecf-in-trash-title {
				.opacity(0);
			}
		}

		.ecf-location-page {
			.ecf-location-page-header {
				.box-shadow(0 1px 25px fade(@black, 12));
		    width: calc(~"100% - 160px");	    
				background-color: @white;		
				border-color: @grey_3;		
				height: 60px !important;
				z-index: 10;
		    position: fixed;	
		    top: 32px;
		    left: 160px;
		    right: 0;
			}
			.page-dropdown {
				z-index: 9;
			}
		}

	}
	.ecf-in-trash-title {
		.transition(opacity, 0.25s, ease-out);
		.translate(-50%, 0);
		.opacity(0);
		visibility: hidden;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 50%;
		margin: 0;
		font-size: 28px;
		color: @accent;
	}
	.ecf-in-trash-notice-toggler {
		.box-shadow(0 0 19px 2px fade(@black, 10));
		.roundedcorners(30px);
		.flex();
		background: @white;
		border: 4px solid @white;
		position: fixed;
		right: 15px;
		bottom: 30px;
		z-index: 14;
		overflow: hidden;
		align-items: center;
		justify-content: center;
		> span {
			.flex();
			.roundedcorners(30px);
			color: @white;
			background: @accent;
			font-size: 24px;
			width: 30px;
			height: 30px;
			align-items: center;
	    justify-content: center;
		}
	}
	.ecf-in-trash-notice {
		.opacity(0);
		.roundedcorners(20px);
		.flex();
		color: @white;
		background-color: @text_3;
		padding: 5px 20px 6px;
		position: fixed;
		right: 16px;
		bottom: 30px;
		z-index: 13;
		margin: 0;
		font-size: 16px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
	}

	.inner-page {
		& + .ecf-location-page {
			.ecf-no-fields-exists-yet {

				&.ecf-no-fields {
					.ecf-create-buttons-wrapper {
						text-align: center;
						justify-content: center;
					}
				}
				
				.ecf-create-buttons-wrapper {
					text-align: left;
				}
			}
		}
	}
	.ecf-location-page {
		padding-top: 95px;

		.ecf-location-page-header {
			.box-shadow(0 2px 15px fade(@black, 8));
			.flex();
			.translate(0,0);
			width: calc(~"100% + 80px");
			background-color: @white;
			border-bottom: 1px solid @grey_2;
			position: absolute;
			padding: 0 40px;
			top: -40px;
			left: -40px;
			text-align: right;
			height: 104px;
			align-items: center;
	    justify-content: flex-end;
			.ecf-is-unsaved {
				position: absolute;
				top: calc(~"50% + 26px");
				margin: 0;
				text-transform: lowercase;
				font-size: 13px;
				letter-spacing: 0.5px;
				font-weight: 500;
			}
			.ecf-save-button {
				&.grey {
					cursor: auto;
				}
			}
		}
		.ecf-loader-wrapper {
			.flex();
			font-size: 22px;
			align-items: center;
		}
		.ecf-main-loader {
			width: 25px;
			height: 25px;
			font-size: 30px;
			margin-right: 10px;
			align-items: center;
			img {
				width: 25px;
			}
		}
		.page-dropdown {
			position: relative;
			z-index: 10;
		}
		.ecf-field-filters {
			.flex();
			position: relative;
			padding-bottom: 30px;
			height: 85px;
	    align-items: center;
			.ecf-search-outer-wrapper {
				.flex();
				position: absolute;
				min-width: 100%;
		    position: absolute;
		    justify-content: flex-end;
				.ecf-search-wrapper {
					right: 0;
					top: 0;
				}
				.back-button {
					transform-origin: left;
					left: 0;
					display: flex;
					align-items: center;
					font-size: 16px;
					font-weight: 600;
					position: absolute;
					top: -34px;
					text-transform: capitalize;
					visibility: hidden;
					z-index: 101;
					label {
						font-weight: inherit;
						color: @text_3;
						padding-right: 5px;
					}
					span {
						color: @text_3;
						ion-icon {
							position: relative;
							top: 2px;
						}
					}
				}
			}
			

		}
		.ecf-no-fields-exists-yet {
			top: 30px;
			position: relative;
			height: 300px;

			.ecf-create-buttons-wrapper {
				.opacity(0);
				.translate(-50%, -50%);
				position: absolute;
				top: 50%;
				left: 50%;
				min-width: 320px;
		    text-align: center;
				.ecf-button {
					margin: 0 5px 0 0;
				}
			}

			> p {
				.flex();
				.translate(0, -50%);
				color: @text_2;
				top: calc(~"50% - 85px");
				width: 100%;
				height: 60px;
				position: absolute;
				left: 0;
				font-size: 17px;
				text-align: center;
				align-items: center;
				justify-content: center;
				margin: 0;
				em {
					color: @text_3;
					font-style: inherit;
				}
				> span {
					width: 100%;
				}
			}
		}
	}

}

@media (max-width: 1350px) {

	#ecf-creator {
		.header-sticky {
			.ecf-location-page {
				.ecf-location-page-header {
					padding: 0 10px;
			    left: 165px;
	        width: calc(~"100% - 165px");
				}
			}
		}
	}

	body.auto-fold, body.folded {
		#ecf-creator {
			.header-sticky {
				.ecf-location-page {
					.ecf-location-page-header {
				    left: 46px;
		        width: calc(~"100% - 46px");
					}
				}
			}
		}
	}
	
}

@media (max-width: 782px) {

	#ecf-creator {
		.header-sticky {
			.ecf-location-page {
				.ecf-location-page-header {
					left: 0 !important;
					width: 100% !important;
					top: 46px;
				}
			}
		}
	}	
}

@media (max-width: 600px) {

	#ecf-creator {
		.header-sticky {
			.ecf-location-page {
				.ecf-location-page-header {
					top: 0;
				}
			}
		}
	}	
}

@media (max-width: 500px) {
	#ecf-creator {

		.header-sticky {
			.ecf-location-page {
				.ecf-location-page-header {
					top: 0;
				}
			}
			.ecf-in-trash-title { 
				display: none;
			}
		}

		.ecf-location-page {
			padding-top: 55px;

			.ecf-location-page-header {
				height: 71px;
				left: -11px;
				padding: 0 11px;
				width: calc(~"100% + 22px");
				> div {
					position: absolute;					
				}
				.ecf-save-button {
					height: 36px;								
					.ecf-button-inner {
						padding: 0px 8px;
						font-size: 14px;
						font-weight: 600;
						line-height: 31px;		
					}
				}
			}

			.ecf-field-filters {
				flex-wrap: wrap;
				height: 115px;
				padding-bottom: 20px;
				align-items: flex-start;
				.ecf-search-outer-wrapper {
					bottom: 20px;
					.ecf-search-wrapper {
						width: 100% !important;
					}
				}
			}

			.ecf-no-fields-exists-yet {
				.ecf-create-buttons-wrapper {
					min-width: 300px;
				}
			}

		}
	}
	
}