.block-editor-block-patterns-list__list-item {
	cursor: pointer;
	margin-bottom: $grid-unit-30;

	&.is-placeholder {
		min-height: 100px;
	}

	&[draggable="true"] .block-editor-block-preview__container {
		cursor: grab;
	}
}

.block-editor-block-patterns-list__item {
	height: 100%;

	.block-editor-block-preview__container {
		display: flex;
		align-items: center;
		overflow: hidden;
		border-radius: $radius-block-ui;
		border: $border-width solid $gray-100;
	}

	.block-editor-block-patterns-list__item-title {
		padding-top: $grid-unit-10;
		font-size: 12px;
		text-align: center;
	}

	&:hover .block-editor-block-preview__container {
		border: $border-width solid var(--gc-admin-theme-color);
	}

	&:focus .block-editor-block-preview__container {
		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--gc-admin-border-width-focus) var(--gc-admin-theme-color);

		// Windows High Contrast mode will show this outline, but not the box-shadow.
		outline: 2px solid transparent;
	}


	&:hover .block-editor-block-patterns-list__item-title,
	&:focus .block-editor-block-patterns-list__item-title {
		color: var(--gc-admin-theme-color);
	}
}