@import './components/layout-control/editor';
@import './components/separators/editor';

html[lang="ja"], html[lang="ko"], html[lang="zh"], html[lang="zh-Hans"], html[lang="zh-Hant"] {
	.wp-block-themeisle-blocks-advanced-columns .innerblocks-wrap {
		word-break: normal;
	}
}

.wp-block-themeisle-blocks-advanced-columns {
	--background: transparent;
	--columns-width: initial;
	display: flex;
	transition: 0.3s;

	/* Add this to override Neve styles */
	&[class*="has-dark-"] p, &[class*="has-light-"] p {
		color: unset;
	}

	&.has-dark-bg {
		color: var( --text-color, var( --nv-text-dark-bg , #fff ) );
	}

	&.has-light-bg {
		color: var( --text-color, var( --nv-text-color , #000 ) );
	}

	> .innerblocks-wrap {
		flex-basis: 100%;
		width: 100%;
		word-break: keep-all;
		max-width: var( --columns-width );

		&:not(:first-child, :last-child) {
			z-index: 1; // If dividers are present, make sure they are behind the columns.
		}

		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			display: flex;
			flex-wrap: nowrap;

			.wp-block-themeisle-blocks-advanced-column {
				display: flex;
				max-width: unset;
				margin: inherit;
				flex: 1;

				/* Add this to override Neve styles */
				&[class*="has-dark-"] p, &[class*="has-light-"] p {
					color: unset;
				}

				> .block-editor-inner-blocks {
					flex: 1;
				}

				.wp-block-themeisle-blocks-advanced-columns {
					max-width: unset;
				}

				&.has-dark-bg {
					color: var( --text-color, var( --nv-text-dark-bg , #fff ) );
				}

				&.has-light-bg {
					color: var( --text-color, var( --nv-text-color , #000 ) );
				}
			}
		}
	}

	.block-editor-block-variation-picker {
		.block-editor-block-variation-picker__variations {
			svg {
				width: 48px;
				height: 48px;
			}
		}
	}

	.wp-block-themeisle-blocks-advanced-column {
		--background: transparent;
		--background-color-hover: var( --background );

		background: var( --background );
		transition: 0.3s;

		&:hover {
			background: var( --background-color-hover );
		}

		> * {
			position: relative;
		}

		a:not( .wp-block-button__link ):not( .social-icon ) {
			color: var( --link-color );
		}

		.wp-block-themeisle-blocks-advanced-column-overlay {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.wp-block-themeisle-blocks-slider {
			display: block;
		}

		.aligncenter {
			margin-left: auto;
			margin-right: auto;
		}
	}

	.wp-themeisle-block-overlay,
	.wp-block-themeisle-blocks-advanced-columns-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	&.has-default-gap {
		.wp-block-themeisle-blocks-advanced-column {
			margin-left: 10px;
			margin-right: 10px;
		}
	}

	&.has-nogap-gap {
		.wp-block-themeisle-blocks-advanced-column {
			margin-left: 0;
			margin-right: 0;
		}
	}

	&.has-narrow-gap {
		.wp-block-themeisle-blocks-advanced-column {
			margin-left: 5px;
			margin-right: 5px;
		}
	}

	&.has-extended-gap {
		.wp-block-themeisle-blocks-advanced-column {
			margin-left: 15px;
			margin-right: 15px;
		}
	}

	&.has-wide-gap {
		.wp-block-themeisle-blocks-advanced-column {
			margin-left: 20px;
			margin-right: 20px;
		}
	}

	&.has-wider-gap {
		.wp-block-themeisle-blocks-advanced-column {
			margin-left: 30px;
			margin-right: 30px;
		}
	}

	&.has-vertical-flex-start,
	&.has-vertical-top {
		align-items: flex-start;

		.wp-block-themeisle-blocks-advanced-column {
			align-items: flex-start;
		}
	}

	&.has-vertical-center {
		align-items: center;

		.wp-block-themeisle-blocks-advanced-column {
			align-items: center;
		}
	}

	&.has-vertical-flex-end,
	&.has-vertical-bottom {
		align-items: flex-end;

		.wp-block-themeisle-blocks-advanced-column {
			align-items: flex-end;
		}
	}

	&.has-horizontal-flex-start {
		justify-content: flex-start;
	}

	&.has-horizontal-center {
		justify-content: center;
	}

	&.has-horizontal-flex-end {
		justify-content: flex-end;
	}

	&.has-viewport-tablet {
		&.has-tablet-collapsedRows-layout {
			> .innerblocks-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
				flex-direction: column;
			}

			&.has-reverse-columns-tablet {
				> .innerblocks-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
					flex-direction: column-reverse;
				}
			}
		}

		&.has-tablet-twoColumnGrid-layout {
			> .innerblocks-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
				display: grid;
				grid-template-columns: auto auto;
			}
		}

		&.has-tablet-threeColumnGrid-layout {
			> .innerblocks-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
				display: grid;
				grid-template-columns: auto auto auto;
			}
		}
	}

	&.has-viewport-mobile {
		&.has-mobile-collapsedRows-layout {
			> .innerblocks-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
				flex-direction: column;
			}

			&.has-reverse-columns-mobile {
				> .innerblocks-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
					flex-direction: column-reverse;
				}
			}
		}

		&.has-mobile-twoColumnGrid-layout {
			> .innerblocks-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
				display: grid;
				grid-template-columns: auto auto;
			}
		}

		&.has-mobile-threeColumnGrid-layout {
			> .innerblocks-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
				display: grid;
				grid-template-columns: auto auto auto;
			}
		}
	}

	.wp-block-themeisle-blocks-advanced-column {
		&:before {
			inset: 0;
		}
	}
}

.components-popover.block-editor-block-list__block-popover > .components-popover__content {
	.block-editor-block-contextual-toolbar {
		&.wp-block-themeisle-blocks-advanced-column {
			margin: 0;
		}
	}
}

.o-section-border-container {
	&.components-panel__body {
		> .components-toggle-control {
			margin: 1.5em 0 0 0;

			.components-base-control__field {
				margin-bottom: 0;
			}
		}
	}
}
