@import 'variables.less';
@import 'mixins.less';
@import 'common.less';
@import 'less/mime-types.less';
@import 'less/components/icons.less';
@import 'less/components/button.less';
@import 'less/components/tooltip.less';
@import 'less/components/form-fields.less';
@import 'less/components/confirmation-dialog.less';
@import 'less/components/link-popup.less';
@import 'less/real-fields/scrollbar.less';
@import 'less/real-fields/alerts.less';
@import 'less/real-fields/general.less';
@import 'less/real-fields/dropdown-field.less';
@import 'less/real-fields/choice.less';
@import 'less/real-fields/heading.less';
@import 'less/real-fields/upload.less';
@import 'less/real-fields/edit-fields-link.less';

body {
	&.ecf-overlay-open {
		overflow-x: hidden;
	}
}

#customize-theme-controls .customize-pane-child#sub-accordion-panel-ecf_panel {
	visibility: visible;
}

#effcf_metabox {
	.inside {
		.box-shadow(0 0 0 1px @grey_3 inset);
		border: 15px solid @white;
		border-width: 5px 5px 5px;
		margin: 0;
		padding: 1px 25px 1px;
	}
}

.interface-interface-skeleton__content {
	overflow-x: hidden;
}

.ecf-setting-pages-fields {
	overflow: hidden;
	> th {
		display: none;
	}
	> td {
		position: relative;
		padding: 0;
		.ecf-edit-fields-link {
			top: -45px;			
		}
	}
}

.ecf-output-fields-wrapper {

	overflow: visible;
	line-height: 1.4;

	.ecf-section-separator {
		background: @grey_2;
		border: 1px solid @grey_3;
		border-width: 1px 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 16px;
		&.ecf-after {
			top: auto;
			bottom: 0;
		}
	}

	.ecf-form-field {
		.ecf-selected-items {
			padding-right: 100px;
			&.ecf-reorder-on {
				.roundedcorners(10px);
				border: 1px dashed @grey_3;
				background: @grey_0;
				padding: 10px 106px 5px 10px;
				.ecf-reorderable {
					cursor: move;
				}
			}
		}
	}

	.ecf-accordion-wrapper,
	.ecf-tabs-wrapper {
		.ecf-layout-title {
			padding: 0 0 15px !important;
			> h2 {
				color: @text_1;
				font-size: 20px !important;
				margin: 0;
				font-weight: 600;
				padding: 0 !important;
				position: relative;
				small {
					.opacity(0.5);
					padding-left: 5px;
					display: none;
				}
				.ecf-reorder {
					color: @text_1;
					position: absolute;
					right: 0;
					font-weight: 400;
					text-transform: uppercase;
					font-size: 15px;
					top: 3px;
					&.ecf-reorder-on {
						color: @primary;
						font-weight: 600;
					}
				}
			}
			> p {
				color: @text_1;
				margin: 0;
				font-size: 15px;
			}
		}
		
	}

	.ecf-field-group,
	.ecf-accordion-wrapper,
	.ecf-tabs-wrapper {
		background-color: @grey_1;
		position: relative;
		padding: 46px 24px 52px;		
		margin: 0 -24px;
		&.ecf-next-group {
			padding-bottom: 36px;
			> .ecf-section-separator {
				&.ecf-after {
					display: none;
				}
			}
		}
		&.ecf-is-last {
			> .ecf-section-separator {
				&.ecf-after {
					display: none;
				}
			}
		}
		&.ecf-sr-1 {
			padding-top: 30px;
			> .ecf-section-separator {
				&.ecf-before {
					display: none;
				}
			}
		}
	}

	.ecf-field-group {
		padding-bottom: 46px;
	}

	.ecf-field {
		.transition(border-color, 0.25s, ease-out);
		background-color: @white;
		border-bottom: 1px solid @grey_1;
		padding: 20px 0;
		position: relative;

		&:hover {
			.ecf-reorder {
				.opacity(1);
			}
		}

		&.ecf-is-last,
		&.ecf-next-group {
			border-width: 0;
		}

		&.ecf-next-hidden {
			border-color: transparent;
		}

		.ecf-reorder {
			.transition(opacity, 0.15s, ease-out);
			.opacity(0);
	    position: absolute;
	    right: 0;
	    top: 44px;
	    color: @text_1;
	    text-transform: uppercase;
	    font-size: 14px;

	    &.ecf-reorder-on {
  	    .opacity(1);
	    	color: @primary;
	    	font-weight: 600;
  	    top: 58px;
  	    right: 8px;
	    }
	  }

		&.ecf-upload-field {
			padding-bottom: 15px;
		}

		&.ecf-number_slider-field {
			padding-top: 39px;
			padding-bottom: 26px;
		}

		&.ecf-html-field {
			.ace_editor {
				.roundedcorners(5px);
				border: 1px solid @grey_2;
				height: 300px;
			}
		}

		&.ecf-embed-field {
			.ecf-embed-container {
				.ecf-spin {
					.flex();
					width: 25px;
					height: 25px;
					margin-top: 14px;
					> span {
						.flex();
						font-size: 25px;
					}
				}
				&.ecf-valid {
					.roundedcorners(10px);
					margin-top: 5px;
					overflow: hidden;
					padding-bottom: 28%;
					position: relative;
					width: 50%;			
					iframe {
						width: 100%;
				    position: absolute;
				    height: 100%;
					}
				}
			}
		}

		&.ecf-textarea-field {
			.ecf-input-wrapper {
				.ecf-form-control {
					padding: 15px;
				}
			}			
		}

		&.ecf-is-invalid {
			.ecf-input-wrapper {
				> .ecf-form-control,
					.ecf-selectbox {
					color: @danger;
					background: fade(@danger, 8%);
					border-color: fade(@danger, 12%);
				}
			}
		}

		.ecf-label-wrapper {
			width: 250px;

			label {
				font-size: 15px;
		    font-weight: 600;
		    display: block;
			}

			.ecf-desc {
				color: @text_2;
				margin: 0;
				font-size: 14px;
			}

		}

		.ecf-input-wrapper {
			width: calc(~"100% - 250px");
			position: relative;

			&:hover {
				.ecf-icon-holder {
					&.ecf-remove-text {
						.opacity(1);
					}					
				}
			}		

			.ecf-form-control {
				.box-shadow(none);
				.placeholder(@text_1);
				.transition(all, 0.25s, ease);
				.roundedcorners(5px);
				border: 1px solid @grey_1;
				background-color: @grey_1;
				color: @text_3;
				position: relative;
				font-size: 15px;
				min-height: 40px;
				width: 100%;
				padding: 0 15px;
				outline: none;
				margin: 0;
				&:focus {
					background-color: @white;
					border-color: @grey_2;
					.box-shadow(0 0 0 1px @grey_2);
				}
			}

			.ecf-icon-holder {				
				color: @primary;
				width: 40px;
				height: 38px;
				position: absolute;
				right: 0;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				&.ecf-remove-text {
					.transition(all, 0.25s, ease-out);
					.opacity(0);
					right: 40px;
					color: @text_1;
				}
				> span {
					font-size: 22px;
			    width: 22px;
			    height: 22px;
			    color: inherit;
				}
				svg {
					fill: @primary;
					width: inherit;
					height: inherit;
					* {
						stroke: currentColor !important;
					}
				}
			}
		}
	}
}


.ecf-output-fields-wrapper {

	.ecf-all-fields-header {
		margin: 0 -24px;
		border-bottom: 2px solid @grey_3;
		h3 {
		  background: @white;
		  color: @text_3;
			margin: 0;
		  padding: 15px 24px;
		  font-weight: 500;
		  font-size: 16px;
		}
	}

	&.ecf-customizer {

		&.ecf-xs {
			.ecf-field {
				&.ecf-embed-field {
					.ecf-embed-container {
						&.ecf-valid {
							width: 100%;
							padding-bottom: 56.5%;
						}
					}
				}
			}
		}

		.ecf-all-fields-header {
			position: absolute;
			top: -64px;
			right: 14px;
			margin: 0;
			border-width: 0;
		}
		.ecf-field {
			padding-left: 15px;
			padding-right: 15px;
		}
		.ecf-field-group,
		.ecf-accordion-wrapper,
		.ecf-tabs-wrapper {
			margin: 0 -9px;
			padding-left: 15px;
			padding-right: 15px;
			.ecf-field {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}

	&.ecf-menu {
		border: 1px solid @grey_3;
		clear: both;
		float: left;
		width: 100%;
		padding: 0 24px 0;
		margin: 20px 0 20px;
		.ecf-all-fields-header {
			border-bottom: 2px solid @grey_3;
			h3 {
				background: @grey_2;
				margin: 0 !important;
				padding: 10px 24px;
			}
		}		
	}

	&.ecf-taxonomy,
	&.ecf-settings, 
	&.ecf-profile {
		background: @white;
		border: 1px solid @grey_3;
		padding: 0 24px;
	}

	&.ecf-taxonomy{
		margin-bottom: 20px;		
		&.ecf-taxonomy-add {
			max-width: 95%;
		}
		&.ecf-taxonomy-edit {
			max-width: calc(~"100% - 15px");
			margin: 0 -10px;
		}		
	}
	
	&.ecf-sm {
		.ecf-field {
			.ecf-label-wrapper {
				width: 220px;
			}
			.ecf-input-wrapper {
				width: calc(~"100% - 220px");
			}
		}
	}

	&.ecf-xs, &.ecf-taxonomy {
		.ecf-field {
			padding-bottom: 20px;

			&.ecf-next-group {
				padding-bottom: 33px;
			}

			&.ecf-embed-field {
				.ecf-embed-container {
					&.ecf-valid {
				    width: 75%;
				    padding-bottom: 42%;
					}
				}
			}

			&.ecf-number_slider-field {
				.ecf-label-wrapper {
					margin-bottom: 45px;
				}
			}

			> .ecf-d-flex {
				flex-wrap: wrap;
			}

			.ecf-label-wrapper {
				width: 100%;
		    margin-bottom: 7px;
			}

			.ecf-input-wrapper {
				width: 100%;
			}

		}
	}

}