@import '../../styles/variable';

.wp-block-gutenkit-container {
	width: 100%;
	padding: 10px;

	& > .gkit-block__inner{
		&::before {
			content: '';
			border: 1px dashed $gkit-border-secondary-color;
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}

		&.gkit-has-children{
			&::before {
				border: 0;
			}
		}
	}

	.gkit-container-resize-handler{
		z-index: -1;
		&.show-handle {
			height: 100%;
			width: 10px;
			position: absolute;
			top: 0;
			right: 0;
			cursor: col-resize;
			z-index: 9999;

			&.gkit-container-resize-handler-left{
				left: 0;
			}
		}

		& + .gkit-container-resizer-tooltip {
			width: 30px;
			height: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			background-color: #000;
			transform: translateY(-50%);
			color: #fff;
			top: 50%;
			font-size: 12px;
			z-index: 9999;

			&.tooltip-position-right {
				right: 10px;
				left: auto;
			}

			&.tooltip-position-left {
				left: 10px;
			}
		}
	}

	&.gkit-has-inner-children{
		padding: unset;
	}
}

.gkit-container-parent {
	display: flex;
	justify-content: center;
	align-items: center;

	.gkit-container-child {
		flex: 1;
	}
}

.editor-styles-wrapper .has-global-padding > .block-editor-block-list__block.alignfull {
	margin-left: auto;
	margin-right: auto;
}

.block-list-appender > .block-editor-inserter {
	margin-top: 20px;
	margin-bottom: 20px;
}

.block-editor-button-block-appender {
	box-shadow: none;
	color: $gkit-background-secondary;
	&:hover {
		box-shadow: none;
		color: $gkit-background-secondary;
	}
	&:focus {
		box-shadow: none !important;
	}
}