@import '../../variables.less';
@import '../../mixins.less';
/***************
form-field.less
*****************/
.ecf-form-field {
	> .ecf-input-wrapper {
		position: relative;
		.ecf-help-block {
	    color: @text_1;
			position: absolute;
	    margin: 0;
	    font-size: 12px;
	    text-transform: lowercase;
	    left: 2px;
		}
	}
	> input {
		.roundedcorners(7px);
		.box-shadow(0 1px 4px fade(@black, 10) inset);
		border: 1px solid @grey_3;
		background: @grey_2;
		height: 40px;
		padding: 0 15px;
	}
	.ecf-selected-items,
	.dropdown-wrapper.small .dropdown-wrapper-inner .ecf-selected-items {
		margin: 7px 0 0 0;
		padding: 0;
		.flex();
		flex-wrap: wrap;

		&:empty {
			display: none;
		}

		> a {
			.inline-flex();
			.roundedcorners(4px);
			.box-shadow(none);
			background: @text_1;
			color: @white;
			padding: 0 5px 0 8px;
			margin: 0 5px 5px 0;
			height: 23px;
			align-items: center;
			text-transform: none;
			border-width: 0;
			font-size: 14px;
			font-weight: 400;
	    overflow: hidden;
	    white-space: nowrap;

			> span {
				.inline-flex();
				color: @white;
				margin-left: 5px;
				position: static;
				&.ecf-icon-reorder-three {
					margin-left: -22px;
			    margin-right: 7px;
				}
				ion-icon {
			    font-size: 16px;
				}
			}

			> strong {
				margin-left: 2px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&.ecf-ui-placeholder {
				background: @warning_1;
			}
		}
	}

	.ecf-toggle-switch {
		&.ecf-checked {
			.ecf-toggle-switch-inner {
				.ecf-toggle-hangle-wrapper {
					width: 100%;
					background: @primary;
				}
			}
		}
		.ecf-toggle-switch-inner {
			.roundedcorners(40px);
			background: @grey_3;
			width: 46px;
			height: auto;
			.ecf-toggle-hangle-wrapper {
				background: @grey_3;
				.roundedcorners(40px);
				height: 26px;
				width: 26px;
				position: relative;
				.ecf-toggle-handle {
					.roundedcorners(25px);
					.box-shadow(0 0 6px 1px fade(@black, 7));
					background: @white;
					position: absolute;
					right: 3px;
					top: 3px;
					display: block;
					width: 20px;
					height: 20px;
				}
			}
		}
	}

	.wp-editor-container {
		.box-shadow(none);
		border: 1px solid @grey_2;			
		overflow: hidden;
	}

	.wp-editor-tabs {
		.wp-switch-editor {
			height: 28px;
		}
	}

	.wp-picker-container {
		.wp-picker-holder {
			position: absolute;
			z-index: 101;

			.iris-picker {
				.roundedcorners(6px);
				.box-shadow(0 0 30px 2px fade(@black, 15));

				.iris-picker-inner {
					right: 0;
					.iris-square {
						width: calc(~"100% - 52px") !important;
						margin-right: 12px;
					}
				}	

			}
		}
		.wp-color-result {
			&.button {
				.roundedcorners(4px);
				border: 1px solid @grey_3;
				height: 36px;
				overflow: hidden;
				margin: 0 6px 0 0;
				&:focus {
					.box-shadow(0 0 0 1px @primary);
				}
				.wp-color-result-text {
					.roundedcorners(0);
					background: @white;						
					font-size: 14px;
					padding: 0 10px;
					line-height: 34px;
					border-left: 1px solid @grey_3;
				}
			}
		}
		input[type=text] {
			&.wp-color-picker {
				background: @grey_2;
				.roundedcorners(4px);
				width: 77px;
				font-size: 14px;
				padding: 0 9px;
				min-height: 36px;
				line-height: 36px;
				border-width: 0;
				&:focus {
					.box-shadow(0 0 0 2px @grey_2);
					background: @white;
				}
			}
		}
		.wp-picker-input-wrap {
			.button.wp-picker-clear {
				.roundedcorners(4px);
				background: @text_1;
				color: @white;
				line-height: 36px;
				font-size: 14px;
				border-width: 0;
				padding: 0 12px;
				height: 36px;
				
				&:focus {
					.box-shadow(0 0 0 2px @grey_2);
				}
			}
		}
	}
}

.ecf-input-type {
	&.ecf-input-type-range {
		.ecf-slider-holder {
			.roundedcorners(4px);
			background: fade(@text_2, 30%);
			position: relative;
			height: 6px;
			border-width: 0;
			z-index: 1;

			.ecf-dots {
				padding: 0 2px;
				position: absolute;
				width: 100%;
				top: 2px;
				align-items: center;
				justify-content: space-between;
				z-index: 2;

				.ecf-dot {
					.roundedcorners(2px);
					width: 2px;
					height: 2px;
					background-color: @white;
				}
			}

			.ecf-range-front-bar,
			.ui-slider-range {
				background: @text_2;
				.roundedcorners(6px);
				position: absolute;
				left: 0;
				top: 0;
				height: 6px;
				&.w40 {
					width: 40%;
				}
			}

			.ecf-current-value {
				.flex();
				.translate(-50%, 0);
				.roundedcorners(5px);
				background: @text_2;
				left: 40%;
				color: @white;
				position: absolute;
				top: -36px;
				width: auto;
				height: 21px;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				padding: 1px 4px;
				line-height: 14px;

				&:after {
					content: '';
					border-color: @text_2 transparent transparent transparent; 
					border-width: 6px 3px 0 3px;
					border-style: solid;
					position: absolute;
					top: 100%;
					left: calc(~"50% - 3px");
				}
			}
			.ecf-range-adjuster,
			.ui-slider-handle {
				.roundedcorners(16px);
				.box-shadow(0 0 5px 2px fade(@black, 15));
		    .translate(-50%, 0);
		    color: @white;
		    background: @text_2;
		    border: 3px solid @white;
				position: absolute;
		    left: 40%;
		    top: -8px;
        width: 20px;
        height: 20px;
		    align-items: center;
		    justify-content: center;	
		    z-index: 2;	
		    margin-left: 0;	  
		    cursor: grab;  
			}
		}
		.ecf-start-end {
			justify-content: space-between;
			position: relative;
			top: 3px;
			span {
				font-size: 14px;
				color: @text_1;
			}
		}
	}
}

.ecf-output-fields-wrapper {
	&.ecf-xs {
		.ecf-form-field {

			&.ecf-multi-field {
				.ecf-selected-items {
					padding-right: 0 !important;				
			    padding-top: 15px;

			    &.ecf-reorder-on {
			    	padding-top: 32px;
			    }
				}
			}	
			
		}
	}
}