

@import '../../../css/scss/editor.mixins.scss';

div.DTE_Field:after {
	display: block;
	content: ".";
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}


// Inline editing
div.DTE_Inline {
	div.DTE_Field {
		width: 100%;

		> div {
			width: 100%;
			padding: 0;
		}

		label {
			display: none;
		}

		input {
			width:100%;
			color:black;
		}

		div.help-block {
			display: none;
		}
	}
}


// Bubble form editing
div.DTE_Bubble {
	position: absolute;
	z-index: 11;
	margin-top: -6px;
	opacity: 0;

	div.DTE_Bubble_Liner {
		position: absolute;
		bottom: 0;
		border: 1px solid black;
		width: 300px;
		margin-left: -150px;
		background-color: white;
		box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
		border-radius: 6px;
		padding: 0 0 0.5em 0;
		border: 1px solid rgba( 0, 0, 0, .2 );
		@include box-sizing(border-box);

		div.DTE_Bubble_Table {
			display: table;
			width: 100%;

			> form {
				display: table-cell;

				div.DTE_Form_Content {
					padding: 0;

					div.DTE_Field {
						position: relative;
						zoom: 1;
						margin-bottom: 0.5em;

						&:last-child {
							margin-bottom: 0;
						}

						label,
						>div {
							width: 100%;
							float: none;
							clear: both;
							text-align: left;
						}

						label {
							padding-bottom: 4px;
						}
					}
				}
			}

			div.DTE_Form_Buttons {
				display: table-cell;
				vertical-align: bottom;
				padding: 0 1em 0.75em 0.75em;
				width: 1%; // browser will resize to a min width
			}
		}

		div.DTE_Header {
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			background-color: #f7f7f7;
			border-bottom: 1px solid #ebebeb;
			font-size: 14px;
			width: 100%;
		}

		div.DTE_Form_Error {
			float: none;
			display: none;
			padding: 0;
			margin-bottom: 0.5em;
		}

		div.DTE_Bubble_Close {
			@include close-icon();

			&:after {
				margin-top: -2px;
				display: block;
			}
		}
	}

	div.DTE_Bubble_Triangle {
		position: absolute;
		height: 10px;
		width: 10px;
		top: -6px;
		background-color: white;
		border: 1px solid rgba( 0, 0, 0, .2 );
		border-top: none;
		border-right: none;

		-webkit-transform: rotate(-45deg);
		   -moz-transform: rotate(-45deg);
		    -ms-transform: rotate(-45deg);
		     -o-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}
}

div.DTE_Bubble_Background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: rgba( 0, 0, 0, 0.05 );
}

