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

/**********************
confirmation-dialog.less
*************************/

.auto-fold.folded {
#ecf-creator, .ecf-root {
		.ecf-confirmation-dialog-wrapper {
			&.ecf-dialog-as-popup {
				.ecf-confirmation-dialog-wrapper-inner {
					.ecf-confirmation-dialog {
						right: calc(~"50% - 169px");
					}
				}
			}
		}
	}
}

#ecf-creator, .ecf-root {
	.ecf-confirmation-dialog-outer {
		&.ecf-dialog-as-popup {
			.dropdown-overlay {
				background-color: fade(@black, 25%);
			}
		}
		.dropdown-overlay {
			background-color: fade(@black, 5%);
		}
	}
	.ecf-confirmation-dialog-wrapper {
		&.ecf-dialog-as-popup {
			.ecf-confirmation-dialog-wrapper-inner {
				.ecf-confirmation-dialog {
					position: fixed;
					bottom: 50px;
					right: calc(~"50% - 240px");
					&:after {
						display: none;
					}
				}
			}
		}
		.ecf-confirmation-dialog-wrapper-inner {
			.ecf-confirmation-dialog {
				.roundedcorners(10px);
				.box-shadow(0 20px 50px 10px fade(@black, 18));
				border: 0 solid @white;
				background-color: @black;
		    bottom: calc(~"100% + 10px");
		    transform-origin: calc(~"100% - 25px") bottom;
				z-index: 11;
		    position: absolute;
		    right: 0;
		    width: 300px;
		    &:after {
		    	content: '';
		    	border-color: @black transparent transparent transparent; 
		    	border-width: 10px 10px 0 10px;;
		    	border-style: solid;
		    	position: absolute;
		    	top: 100%;
		    	right: 15px;
		    }
		    h4 {
		    	color: @white;
		    	margin: 0;
		    	padding: 15px 15px 0;
		    	line-height: 1;
		    	font-size: 17px;
		    	font-weight: 500;
		    	& + p {
		    		padding-top: 10px;
		    	}
		    }
		    p {
		    	color: fade(@white, 72%);
		    	padding: 15px;
		    	margin: 0;
    	    font-size: 16px;
		    }
		    .ecf-dialog-buttons-wrapper {
		    	border-top: 1px solid fade(@white, 20);
		    	.roundedcorners(0 0 10px 10px);
	        background-color: transparent;
	        .flex();
	        justify-content: space-between;
	        overflow: hidden;
          .ecf-button {
          	.roundedcorners(0);
          	height: 40px;
          	width: 50%;
          	&:focus {
          		.box-shadow(none);
          	}
          	&:first-child {
          		border-right: 1px solid fade(@white, 20);
          	}
          	&.text {
          		color: @primary_dm;
          	}
          	&.danger {
          		&.text {
          			color: @danger_dm;
          		}
          	}
          	.ecf-button-inner {
          		font-size: 16px;
          	}
          }
		    }
			}
		}
	}

	.ecf-layout-field {
		li.ecf-simple-field {
			&.active, &.delete {
				> header {
					.delete-field {
						color: @white;
					}
				}
			}
			> header {
				.delete-field {
					color: @danger;
					height: 60px;
				}
			}
			.ecf-confirmation-dialog-wrapper {
				position: absolute;
				right: 0;
				top: 0;						
			}

		}
		
	}

}

.ecf-output-fields-wrapper {
	&.ecf-customizer.ecf-xs {
		.ecf-confirmation-dialog-wrapper-inner {
			.ecf-confirmation-dialog {
				right: -50px;

				&:after {
					right: 65px;
				}
			}
		}
	}
}

@media (max-width: 500px) {
	#ecf-creator, .ecf-root {
		.ecf-confirmation-dialog-wrapper .ecf-confirmation-dialog-wrapper-inner {
			.ecf-confirmation-dialog {
		    width: 250px;
				p {
					font-size: 14px;
				}
				.ecf-dialog-buttons-wrapper {
					.ecf-button {
						height: 36px;
					}
				}
			}
		}
		.ecf-tabs-layout-wrapper {
			.ecf-confirmation-dialog-wrapper .ecf-confirmation-dialog-wrapper-inner {
				.ecf-confirmation-dialog {
					right: -45px;
				}
			}
			.ecf-simple-field {
				.ecf-confirmation-dialog-wrapper .ecf-confirmation-dialog-wrapper-inner {
					.ecf-confirmation-dialog {
						right: 200px;
					}
				}
			}
		}
	}	
}