#admin-sidebar-resize-handle {
	align-items: center;
	background-color: var(--admin-redesign-surface-light-tertiary);
	border: 0;
	border-radius: 4px;
	cursor: col-resize;
	display: flex;
	height: 64px;
	inset-block-start: calc(50% - 32px);
	inset-inline-end: 6px;
	justify-content: flex-end;
	padding: 0;
	position: absolute;
	transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
	width: 4px;
	z-index: 9999;

	&:hover {
		background-color: var(--admin-redesign-surface-light-secondary);
		transform: scale(1.1);

		&::after {
			background-color: transparent;
			content: "";
			height: 64px;
			inset-block-start: calc(50% - 32px);
			inset-inline-end: -16px;
			position: absolute;
			width: 32px;
		}
	}

	&.active {
		background-color: var(--admin-redesign-action-primary);
	}

	#adminmenumain:has(.opensub) & {
		background-color: transparent;
		pointer-events: none;
	}
}

/**
 * Disable pointer events on the content area when the sidebar resize
 * handle is active this is to prevent the mouse from entering the iframe
 * within the block editor which would cause the resize event to get stuck
 */
body:has(#admin-sidebar-resize-handle.active) #wpbody-content {
	pointer-events: none;
}
