[data-type="coblocks/shape-divider"] {

	.has-fixed-toolbar & .block-editor-block-list__block-edit::before {
		display: none;
	}

	.wp-block-coblocks-shape-divider {

		svg {
			bottom: 0;
			fill: currentColor;
			height: 100%;
			left: 0;
			position: absolute;
			width: 100%;
		}

		&.is-style-pointed {

			.wp-block-coblocks-shape-divider__svg-wrapper .components-resizable-box__handle {
				left: calc(73.78% - 12px);
			}

			&.is-horizontally-flipped .wp-block-coblocks-shape-divider__svg-wrapper .components-resizable-box__handle {
				left: calc(26.2% - 12px);
			}
		}
	}

	.wp-block-coblocks-shape-divider__alt-wrapper.components-resizable-box__handle {
		left: 0;
		right: 0;
		width: 100%;

		&::after {
			background: var(--wp-admin-theme-color, #007cba);
			border: 2px solid $white;
			border-radius: 50%;
			bottom: 4px;
			content: "";
			cursor: inherit;
			display: block;
			height: 16px;
			position: absolute;
			right: 4px;
			width: 16px;
		}
	}

	.wp-block-coblocks-shape-divider__svg-wrapper::after,
	.wp-block-coblocks-shape-divider__alt-wrapper::after {
		bottom: -2px;
		content: "";
		display: block;
		height: 3px;
		left: 0;
		opacity: 0;
		position: absolute;
		transition: opacity 100ms cubic-bezier(0.39, 0.575, 0.565, 1);
		width: 100%;
		z-index: 29;
	}

	.wp-block-coblocks-shape-divider__svg-wrapper::after {
		left: 0;
		right: 0;
		width: 100%;
	}

	.components-resizable-box__handle {
		z-index: 30;
	}

	.wp-block-coblocks-shape-divider.is-vertically-flipped .components-coblocks-inline-color-picker {
		bottom: inherit;
		top: 20px;
	}
}

.editor-block-preview,
.block-editor-block-styles__item-preview {

	.wp-block-coblocks-shape-divider {
		height: 100%;
		overflow: hidden;

		&__alt-wrapper {
			min-height: 50%;
		}

		&__svg-wrapper {
			min-height: 50%;
		}
	}

	//! Gutenberg 6.3+ introduced a new block style preview.
	.block-editor-block-preview__content[style*="transform:"] {

		.wp-block-coblocks-shape-divider {
			height: 200px;

			&__alt-wrapper {
				min-height: 100px;
			}

			&__svg-wrapper {
				margin-bottom: -0.075em;
				margin-top: 0;
				min-height: 100px;
			}

			&.is-vertically-flipped &__svg-wrapper {
				margin-bottom: 0;
				margin-top: -0.075em;
			}
		}
	}
}

// remove block outline.
.block-editor-block-list__block[data-type="coblocks/shape-divider"]:not([contenteditable]):focus::after {
	box-shadow: none;
}
