/**
 * Editor templates
 *
 * Description: Style for templates for Tiny mce.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Base
 * 2.0 - Template 1
 *   2.1 - Template 1 (in Editor)
 *   2.2 - Template 1 (responsive)
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Base
 * -----------------------------------------------------------------------------
 */

.mceContentBody {
	.layout-unit-container {
		margin-left: 0;
		margin-right: 0;
	}
}



/**
 * 2.0 - Template 1
 * -----------------------------------------------------------------------------
 */

.editor-template-1 {
	border-top: 1px solid $grey-light;
	padding-top: em(33px);
	padding-bottom: em(13px);

	&.no-border {
		border-top: 0;
		padding-top: em(7px);
	}

	h2 + & {
		border-top: 0;
	}

	.layout-content {
		padding: 0;
	}

	.layout-size1of3 {
		.layout-content {
			padding-right: $margin-standard;
		}

		h3 {
			padding-top: 0;
			margin-top: em(-6px, getFontsize($h3-sizes, 'medium'));
		}
	}

	.layout-size2of3 {
		.layout-content {
			padding-left: $margin-standard;

			> *:first-child {
				padding-top: 0 !important;
			}
			
			p:first-child {
				margin-top: em(-5px);
			}
		}
	}
}


/**
 * 2.1 - Template 1 (in Editor)
 * -----------------------------------------------------------------------------
 */

.mceContentBody .editor-template-1 {
	.layout-content {
		border: 1px dashed #bbb;
	}
}


/**
 * 2.2 - Template 1 (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.editor-template-1 {
		.layout-size1of3 .layout-content {
			padding-right: 0;
		}

		.layout-size2of3 .layout-content {
			padding-left: 0;
		}
	}
}