/**
 * #.# Editor Styles
 *
 * CSS for just Backend enqueued after style.scss
 * which makes it higher in priority.
 */

.uagb-columns__wrap::before {
	content: "";
	position: absolute;
	border: 1px dashed #03ddff;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.uagb-columns__edit-active.uagb-columns__wrap::before {
	border-color: #035cff;
}

.editor-bg-image-control .components-button,
.editor-bg-video-control .components-button {
	vertical-align: middle;
}

.uagb-editor-preview-mode-tablet.uagb-columns__stack-tablet {
	.block-editor-block-list__layout {
		flex-direction: column;
	}
}

.uagb-editor-preview-mode-mobile.uagb-columns__stack-tablet {
	.block-editor-block-list__layout {
		flex-direction: column;
	}
}

.uagb-editor-preview-mode-mobile.uagb-columns__stack-mobile {
	.block-editor-block-list__layout {
		flex-direction: column;
	}
}

.editor-bg-image-control .components-button:last-child,
.editor-bg-video-control .components-button:last-child {
	margin-left: 10px;
}

.uagb-columns__wrap > .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex;
	flex-wrap: nowrap;
}

.uagb-columns__wrap > .uagb-columns__inner-wrap > .block-editor-inner-blocks,
.uagb-columns__wrap > .block-editor-block-list__layout {
	width: 100%;
	z-index: 2;
}

.uagb-columns__columns-1 .block-editor-block-list__block[data-type="uagb/column"] {
	width: 100%;
}

.uagb-columns__columns-2 .block-editor-block-list__block[data-type="uagb/column"] {
	width: 50%;
}

.uagb-columns__columns-3 .block-editor-block-list__block[data-type="uagb/column"] {
	width: 33.33%;
}

.uagb-columns__columns-4 .block-editor-block-list__block[data-type="uagb/column"] {
	width: 25%;
}

.uagb-columns__columns-5 .block-editor-block-list__block[data-type="uagb/column"] {
	width: 20%;
}

.uagb-columns__columns-6 .block-editor-block-list__block[data-type="uagb/column"] {
	width: 16.66%;
}

.wp-block-uagb-columns .block-editor-block-list__layout {
	margin-left: 0;
	margin-right: 0;

	.editor-block-list__block {
		max-width: none !important;
	}
}

.block-editor-block-list__block[data-type="uagb/columns"] {
	clear: both;
}

.block-editor-block-list__block[data-align="center"][data-type="uagb/columns"] {
	text-align: inherit;
}

.block-editor-block-list__block[data-type="uagb/column"] > .editor-block-contextual-toolbar {
	top: 38px;
	transform: translateY(-38px);
	margin-left: -29px;
	margin-right: -29px;
}

.block-editor-block-list__block[data-type="uagb/column"] > .editor-block-list__insertion-point {
	top: 0;
	margin-top: 0;
}

.wp-block-uagb-columns.uagb-columns__valign-center > .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="uagb/column"] {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wp-block-uagb-columns.uagb-columns__valign-bottom > .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="uagb/column"] {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.block-editor-block-list__layout
.block-editor-block-list__block[data-type="uagb/column"] > .block-editor-block-list__block-edit {
	margin-left: 14px;
	margin-right: 14px;

	> div:not( .editor-block-contextual-toolbar ) {
		width: 100%;
	}

	> .editor-block-contextual-toolbar {
		position: absolute;
		top: 0;
		transform: translateY(-39px);
	}
}

.wp-block-uagb-columns > .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="uagb/column"] > .block-editor-block-list__block-edit::before {
	bottom: 0;
	top: 0;
}

.block-editor-block-list__block[data-align="full"] .wp-block-uagb-columns {
	padding-left: 15px;
	padding-right: 15px;
}

.wp-block-uagb-columns {
	position: relative;
	z-index: 10;
	margin: 0 auto;
	display: flex;
	flex-direction: column;

	> .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin-left: auto;
		margin-right: auto;

		> [data-type="uagb/column"] {
			display: flex;
			flex-direction: column;
			max-width: none;
			margin-top: 0;
			margin-bottom: 0;

			.block-editor-block-list__block-edit {
				flex-basis: 100%;
			}
		}
	}
}

.wp-block-uagb-columns.uagb-columns__valign-center > .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="uagb/column"] > .block-editor-block-list__block-edit {
	align-items: center;
	display: flex;
}

.wp-block-uagb-columns.uagb-columns__valign-bottom > .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="uagb/column"] > .block-editor-block-list__block-edit {
	align-items: flex-end;
	display: flex;
}

.wp-block-uagb-column {
	width: 100%;
}

.block-editor-block-list__layout .block-editor-block-list__block[data-align="full"][data-type="uagb/columns"] {
	margin-left: 0;
	margin-right: 0;
}

.edit-post-visual-editor
.editor-writing-flow
.block-editor-block-list__layout
.block-editor-block-list__block[data-type="uagb/column"] > .block-editor-block-list__block-edit {
	margin-left: 0;
	margin-right: 0;
}

.block-editor-block-list__layout .uagb-column__wrap {
	z-index: unset;
	overflow: visible;
}

.edit-post-visual-editor
.uagb-editor-preview-mode-mobile
.block-editor-block-list__block[data-type="uagb/column"]
.block-editor-block-list__block-edit {
	padding-left: 0;
	padding-right: 0;
}

.uagb-editor-preview-mode-tablet.uagb-columns__reverse-tablet.uagb-columns__stack-none,
.uagb-editor-preview-mode-mobile.uagb-columns__reverse-tablet.uagb-columns__stack-none,
.uagb-editor-preview-mode-mobile.uagb-columns__reverse-mobile.uagb-columns__stack-none,
.uagb-editor-preview-mode-tablet.uagb-columns__reverse-tablet.uagb-columns__stack-mobile {
	> .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
		flex-direction: row-reverse;
	}
}

.uagb-editor-preview-mode-mobile.uagb-columns__reverse-mobile.uagb-columns__stack-tablet,
.uagb-editor-preview-mode-mobile.uagb-columns__reverse-tablet.uagb-columns__stack-tablet,
.uagb-editor-preview-mode-mobile.uagb-columns__reverse-tablet.uagb-columns__stack-mobile,
.uagb-editor-preview-mode-mobile.uagb-columns__reverse-mobile.uagb-columns__stack-mobile,
.uagb-editor-preview-mode-tablet.uagb-columns__reverse-tablet.uagb-columns__stack-tablet {
	> .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
		flex-direction: column-reverse;
	}
}

/* for editor preview */
.uagb-editor-preview-mode-mobile.uagb-columns__stack-mobile,
.uagb-editor-preview-mode-tablet.uagb-columns__stack-tablet,
.uagb-editor-preview-mode-mobile.uagb-columns__stack-tablet {
	> .uagb-columns__inner-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block[data-type="uagb/column"] {
		width: 100% !important;
	}
}

.block-editor-block-list__block[data-type="uagb/columns"] > .block-editor-block-list__block-edit::before {
	pointer-events: inherit;
}

.block-editor-block-list__block[data-type="uagb/columns"] > .editor-block-list__insertion-point {
	height: 16px;

	.editor-block-list__insertion-point-inserter {
		height: 16px;
	}
}

.uagb-columns-variation-picker {
	// This selector is apprently active for mobile preview.
	.components-placeholder.is-medium {
		.components-placeholder__fieldset {
			// Since sub heading is hidden on mobile, we un-hide it.
			.components-placeholder__instructions {
				display: inline-block;
			}
		}
	}

	.components-placeholder__instructions {
		width: 100%;
		text-align: center;
	}

	.components-button,
	.components-button:hover:not( :disabled ) {
		box-shadow: none;
		outline: none;

		svg {
			width: 100px;
			height: 50px;
			color: #d5dadf;
		}
	}

	.components-button:hover:not( :disabled ) {
		color: #9eaab5;
	}

	.block-editor-block-variation-picker__skip {
		.components-button {
			color: #0073aa;
		}
	}

	.components-placeholder {
		align-items: center;

		.components-placeholder__label {
			font-size: 22px;
			font-weight: 500;

			// The heading has a dash-icon which is invisible but takes up some space, hence we set the it's display to none.
			.dashicon {
				display: none;
			}
		}
	}

	.block-editor-block-variation-picker__variation::before {
		padding-bottom: 0;
	}

	.components-placeholder__fieldset {
		align-items: center;
	}

	.block-editor-block-variation-picker__variations {
		justify-content: center;
		width: 50%;

		> li {
			margin: 8px 30px 0 0;
			width: 80px;
		}
	}
}

@media screen and ( max-width: 976px ) {
	.uagb-columns-variation-picker {
		.components-placeholder__fieldset {
			max-width: 100%;
		}

		ul.block-editor-block-variation-picker__variations {
			justify-content: center;
			column-gap: 35px;
		}
	}
}
