[data-type="coblocks/hero"] {

	.wp-block-coblocks-hero {
		width: 100%;

		&__inner {

			.wp-block-coblocks-hero__content {

				> .block-editor-inner-blocks {

					> .block-editor-block-list__layout {

						> .wp-block {
							max-width: none;
							width: 100%;
						}

						> div:not(.wp-block) {
							display: none;
						}
					}
				}

				// Resize handle.
				> span {

					.components-resizable-box__handle {
						margin: 0 -10px;
						z-index: 90;
					}
				}

				&::before,
				&::after {
					background: var(--wp-admin-theme-color, #007cba);
					content: "";
					display: block;
					height: 100%;
					opacity: 0;
					position: absolute;
					right: -12px;
					top: 0;
					transition: opacity 100ms cubic-bezier(0.39, 0.575, 0.565, 1);
					width: 3px;
					z-index: 29;
				}

				&::before {
					left: -12px;
				}
			}

			&.is-fullscreen {
				// The 56px is the height of the editor header/top toolbar.
				height: calc(100vh - 56px);
			}

			// Resize handles.
			&.hero-top-left-align,
			&.hero-center-left-align,
			&.hero-bottom-left-align {

				.wp-block-coblocks-hero__content {

					> span {

						.components-resizable-box__handle-left {
							display: none;
						}
					}

					&.is-resizing {

						&::after {
							opacity: 1;
						}
					}
				}
			}

			&.hero-top-center-align,
			&.hero-center-center-align,
			&.hero-bottom-center-align {

				.wp-block-coblocks-hero__content {

					&.is-resizing {

						&::before,
						&::after {
							opacity: 1;
						}
					}
				}
			}

			&.hero-top-right-align,
			&.hero-center-right-align,
			&.hero-bottom-right-align {

				.wp-block-coblocks-hero__content {

					> span {

						.components-resizable-box__handle-right {
							display: none;
						}
					}

					&.is-resizing {

						&::before {
							opacity: 1;
						}
					}
				}
			}

			&.is-hero-resizing {

				.wp-block-coblocks-hero__content {

					&.is-resizing {

						&::after {
							opacity: 0;
						}
					}
				}
			}

			&.has-background-video {

				> span {
					position: static;
				}
			}
		}
	}

	// Show resize handle when the block is selected.
	&.is-selected {

		.wp-block-coblocks-hero__inner,
		.wp-block-coblocks-hero__content {

			> span {

				.components-resizable-box__handle {
					display: block;
				}
			}
		}
	}
}
