.parrots-data-editor {
	background-color: extract(@CLR_1, 9);
	height: 100%;
	position: relative;
	border-top: @EDITOR_CONTENT_BORDER_THICKNESS solid @CLR_BORDER_COLOR;

	& > .background {
		background-color: @CLR_BRAND;

		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 30%;
	}

	& > .wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	& > .wrapper > .content {
		position: relative;
		width: 100%;
		height: 100%;
	}

	& > .wrapper > .content > .wrapper {
		position: relative;

		width: 100%;
		height: 100%;

		padding-left: @EDITOR_CONTENT_PADDING_LEFT;
		padding-right: @EDITOR_CONTENT_PADDING_RIGHT;
		padding-bottom: @EDITOR_CONTENT_PADDING_BOTTOM;
	}

	& .parrots-editor-header{
		width: 100%;
		height: @EDITOR_PAGE_ACTION_BUTTON_HEIGHT;
    padding: 0 10pt;
	}

	& .parrots-editor-body{
		background-color: extract(@CLR_1, 9);
		.phlox-box-shadow(0, @EDITOR_CONTENT_SHADOW_VLEN, @EDITOR_CONTENT_SHADOW_VLEN, @EDITOR_CONTENT_SHADOW_BLUR);

		height: 100%;
		width: 100%;
    position: relative;
		overflow-y: auto;

		// overide phx-tab-pane in form
		.phx-form-view {
			.phx-tab-pane {
				padding-bottom: 0;

				>.body {
						height: 100%;

						>phx-component-wrapper.active + * {
							height: 100%;

							.phx-data-lang-selector {
								.component-pane {
									height: 100%;

									>.component-wrapper {
										height: 100%;
									}
								}
							}
							// end lang selector
						}
				}
			}
		}
		// end overide phx-tab-pane
	}
}