/**
 * Editor styles for the admin
 */

[data-type="atomic-blocks/ab-columns"] {
}

.editor-styles-wrapper [data-type="atomic-blocks/ab-columns"] .wp-block {
	max-width: 100%;
}

.edit-post-visual-editor .editor-block-list__block [data-type="atomic-blocks/ab-column"] {
    margin-left: 0;
	margin-right: 0;
}

.ab-layout-column-wrap-admin > .editor-inner-blocks > .editor-block-list__layout {
	display: grid;
    grid-template-rows: 1fr;
    grid-gap: 0 2em;
    min-height: 0;
}

/* Grid gap classes */

.ab-block-layout-column-gap-0 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 0;
}

.ab-block-layout-column-gap-1 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 1em;
}

.ab-block-layout-column-gap-2 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 2em;
}

.ab-block-layout-column-gap-3 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 3em;
}

.ab-block-layout-column-gap-4 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 4em;
}

.ab-block-layout-column-gap-5 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 5em;
}

.ab-block-layout-column-gap-6 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 6em;
}

.ab-block-layout-column-gap-7 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 7em;
}

.ab-block-layout-column-gap-8 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 8em;
}

.ab-block-layout-column-gap-9 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 9em;
}

.ab-block-layout-column-gap-10 > .editor-inner-blocks > .editor-block-list__layout {
	grid-gap: 0 10em;
}

/* Grid column classes. */

/* IE 11 support - Rows and column location must be explicitly defined. */

.ab-layout-column-wrap-admin .editor-block-list__layout [data-type="atomic-blocks/ab-column"]:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: col1;
}

.ab-layout-column-wrap-admin .editor-block-list__layout [data-type="atomic-blocks/ab-column"]:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
	grid-area: col2;
}

.ab-layout-column-wrap-admin .editor-block-list__layout [data-type="atomic-blocks/ab-column"]:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
	grid-area: col3;
}

.ab-layout-column-wrap-admin .editor-block-list__layout [data-type="atomic-blocks/ab-column"]:nth-child(4) {
	-ms-grid-row: 1;
	-ms-grid-column: 4;
	grid-area: col4;
}

.ab-layout-column-wrap-admin .editor-block-list__layout [data-type="atomic-blocks/ab-column"]:nth-child(5) {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
	grid-area: col5;
}

.ab-layout-column-wrap-admin .editor-block-list__layout [data-type="atomic-blocks/ab-column"]:nth-child(6) {
	-ms-grid-row: 1;
	-ms-grid-column: 6;
	grid-area: col6;
}

/* One column grid. */

.ab-layout-columns-1 .editor-block-list__layout {
	grid-template-columns: 1fr;
	grid-template-areas: "col1";
}

/* Two column grid. */

.ab-layout-columns-2 .editor-block-list__layout {
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "col1 col2";
}

.ab-2-col-wideleft .editor-block-list__layout {
	grid-template-columns: 2fr 1fr;
}

.ab-2-col-wideright .editor-block-list__layout {
	grid-template-columns: 1fr 2fr;
}

/* Three column grid. */

.ab-layout-columns-3 .editor-block-list__layout {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: "col1 col2 col3";
}

.ab-3-col-widecenter .editor-block-list__layout {
	grid-template-columns: 1fr 2fr 1fr;
}

.ab-3-col-wideleft .editor-block-list__layout {
	grid-template-columns: 2fr 1fr 1fr;
}

.ab-3-col-wideright .editor-block-list__layout {
	grid-template-columns: 1fr 1fr 2fr;
}

/* Four column grid. */

.ab-layout-columns-4 .editor-block-list__layout {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas: "col1 col2 col3 col4";
}

.ab-4-col-wideleft .editor-block-list__layout {
	grid-template-columns: 2fr 1fr 1fr 1fr;
}

.ab-4-col-wideright .editor-block-list__layout {
	grid-template-columns: 1fr 1fr 1fr 2fr;
}

/* Five column grid. */

.ab-layout-columns-5 .editor-block-list__layout {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas: "col1 col2 col3 col4 col5";
}

.ab-layout-columns-6 .editor-block-list__layout {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas: "col1 col2 col3 col4 col5 col6";
}

.block-editor .ab-layout-columns-4,
.block-editor .ab-layout-columns-5,
.block-editor .ab-layout-columns-6 {
	overflow-x: visible;
}

/* Alignment styles */

.ab-block-layout-column .editor-block-list__block[data-align=full],
.ab-block-layout-column .editor-block-list__block[data-align=wide] {
	margin-left: auto;
	margin-right: auto;
}

[data-type="atomic-blocks/ab-column"] {
	&.ab-is-vertically-aligned-top {
		align-self: flex-start;
	}

	&.ab-is-vertically-aligned-center {
		align-self: center;
	}

	&.ab-is-vertically-aligned-bottom {
		align-self: flex-end;
	}
}

[data-type="atomic-blocks/ab-columns"] {
	.components-placeholder {
		padding: 30px;
	}

	.components-placeholder__fieldset {
		max-width: 100%;
	}
}

.ab-column-selector-button-back {
	margin-top: 23px;
	line-height: 1.4;
	display: inherit;
	vertical-align: middle;
	width: 100%;

	&:hover {
		color: #007cba;
	}

	&:active,
	&:focus,
	&:focus:enabled {
		background-color: transparent;
		box-shadow: none;
	}

	&:before {
		content: "\2190";
		margin-right: 5px;
	}

	svg {
		width: 16px;
    	margin-right: 5px;
	}
}

.ab-column-select-panel {
	.components-button-group {
		margin-bottom: 4px;
	}
	.components-button.is-small {
		height: auto;
		padding: 8px;
		margin: 0 5px 5px 0;
	}
	.components-base-control__field + .components-base-control__help {
		margin-top: 8px;
	}
}

.ab-columns-center .ab-layout-column-wrap-admin {
	margin: 0 auto;
}

.ab-block-layout-column .wp-block-image,
.ab-block-layout-column .wp-block-image .components-resizable-box__container {
	max-width: 100% !important;
	display: block;
}