// To hide the horizontal scrollbar and show the drag handle on the
// left and right of the container.
.editor-resizable-editor.is-resizable {
	overflow: visible;
	margin: 0 auto;
}

.editor-resizable-editor__resize-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	padding: 0;
	margin: auto 0;
	width: $grid-unit-15;
	appearance: none;
	cursor: ew-resize;
	outline: none;
	background: none;
	border-radius: $radius-full;
	border: 0;
	height: 100px;

	&::after {
		position: absolute;
		top: $grid-unit-20;
		left: $grid-unit-05;
		right: 0;
		bottom: $grid-unit-20;
		content: "";
		width: $grid-unit-05;
		background-color: rgba($gray-700, 0.4);
		border-radius: $radius-full;
	}

	&.is-left {
		// Subtract half of the handle width to properly center.
		left: -$grid-unit-20 - math.div($grid-unit-05, 2);
	}

	&.is-right {
		// Subtract half of the handle width to properly center.
		right: -$grid-unit-20 - math.div($grid-unit-05, 2);
	}

	&:hover,
	&:focus,
	&:active {
		opacity: 1;
		&::after {
			background-color: var(--wp-admin-theme-color);
		}
	}
}