.block-editor-block-list__layout .reusable-block-edit-panel {
	align-items: center;
	background: $light-gray-100;
	color: $dark-gray-500;
	display: flex;
	flex-wrap: wrap;
	font-family: $default-font;
	font-size: $default-font-size;
	position: relative;
	top: -$block-padding;
	margin: 0 (-$block-padding);
	padding: $grid-size $block-padding;
	position: relative;

	// Use opacity to work in various editor styles.
	border: $border-width dashed $dark-opacity-light-500;
	border-bottom: none;

	// Show a smaller padding when nested.
	.block-editor-block-list__layout & {
		margin: 0 (-$block-padding);
		padding: $grid-size $block-padding;
	}

	.reusable-block-edit-panel__spinner {
		margin: 0 5px;
	}

	.reusable-block-edit-panel__info {
		margin-right: auto;
	}

	.reusable-block-edit-panel__label {
		margin-right: $grid-size;
		white-space: nowrap;
		font-weight: 600;
	}

	.reusable-block-edit-panel__title {
		flex: 1 1 100%;
		font-size: 14px;
		height: 30px;
		margin: $grid-size-small 0 $grid-size;
	}

	.components-button.reusable-block-edit-panel__button {
		// Prevent button shrinking in IE11 when other items have a 100% flex basis.
		// This should be safe to apply in all browsers because we don't want these
		// buttons to shrink anyway.
		flex-shrink: 0;
	}

	@include break-large() {
		flex-wrap: nowrap;

		.reusable-block-edit-panel__title {
			margin: 0;
		}

		.components-button.reusable-block-edit-panel__button {
			margin: 0 0 0 5px;
		}
	}
}

.editor-block-list__layout .is-selected .reusable-block-edit-panel {
	border-color: $dark-opacity-light-800;
	border-left-color: transparent;

	.is-dark-theme & {
		border-color: $light-opacity-light-800;
		border-left-color: transparent;
	}
}