@import '../../variables.less';
@import '../../mixins.less';
/***************
feedback-popup.less
*****************/
.auto-fold.folded {
	#ecf-creator {
		.ecf-feedback-dialog-wrapper {
			.ecf-feedback-dialog {
				right: calc(~"50% - 18px");
			}
		}
	}
}

#ecf-creator {
	.ecf-feedback-dialog-outer {
		.dropdown-overlay {
			background-color: fade(@black, 5%);
			z-index: 9;
		}
	}
	.ecf-feedback-dialog-wrapper {
		.ecf-feedback-dialog {
			.roundedcorners(10px);
			.box-shadow(0 20px 50px 10px fade(@black, 18));
			.translate(50%, 0);
			background-color: @black;
			right: calc(~"50% - 80px");
			transform-origin: calc(~"100% - 25px") bottom;
			position: fixed;
			bottom: 50px;
			z-index: 11;
			width: max-content;
			padding: 0;
			&.ecf-success {
				p {
					color: @success_dm;
					font-weight: 600;
				}
			}
			&.ecf-warning {
				p {
					color: @accent;
					font-weight: 600;
				}
			}
	    p {
	    	.flex();
	    	color: @white;
	    	align-items: center;
	    	padding: 15px;
	    	margin: 0;
  	    font-size: 16px;
  	    span[class*="ecf-icon-"] {
  	    	.inline-flex();
  	    	font-size: 24px;
  	    	width: 25px;
  	    	height: 25px;
  	    	align-items: center;
  	    	margin-right: 7px;
  	    }
	    }
		}
	}

}

@media (max-width: 500px) {
	#ecf-creator {
		.ecf-feedback-dialog-wrapper {
			.ecf-feedback-dialog {
				width: 80%;
				right: 50% !important;
				p {
					padding: 8px;
					font-size: 13px;
				}
			}
		}
	}
}