.editor-block-types-list {
	list-style: none;
	padding: 2px 0;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}

.editor-block-types-list__list-item {
	display: block;
	width: 33.33%;
	padding: 0 4px;
	margin: 0 0 12px;
}

.editor-block-types-list__item {
	display: flex;
	flex-direction: column;
	width: 100%;
	font-size: $default-font-size;
	color: $dark-gray-700;
	padding: 0;
	align-items: stretch;
	justify-content: center;
	cursor: pointer;
	background: transparent;
	word-break: break-word;
	border-radius: $radius-round-rectangle;
	border: $border-width solid transparent;
	transition: all 0.05s ease-in-out;
	position: relative;

	&:disabled {
		@include block-style__disabled();
	}

	&:not(:disabled) {

		// Show the hover background in a pseudo selector so it can be below "stacked" icons, like Columns.
		&:hover::before {
			content: "";
			display: block;
			@include block-style__hover();
			position: absolute;
			z-index: -1;
			border-radius: $radius-round-rectangle;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		&:hover {
			.editor-block-types-list__item-icon,
			.editor-block-types-list__item-title {
				color: currentColor;
			}
		}

		&:active,
		&.is-active,
		&:focus {
			position: relative;

			// Show the focus style in the icon inside instead.
			outline: none;
			@include block-style__focus-active();

			.editor-block-types-list__item-icon,
			.editor-block-types-list__item-title {
				color: currentColor;
			}
		}
	}
}

.editor-block-types-list__item-icon {
	padding: 12px 20px;
	border-radius: $radius-round-rectangle;
	color: $dark-gray-500;
	transition: all 0.05s ease-in-out;

	.editor-block-icon {
		margin-left: auto;
		margin-right: auto;
	}

	svg {
		transition: all 0.15s ease-out;
	}
}

.editor-block-types-list__item-title {
	padding: 4px 2px 8px;
}

.editor-block-types-list__item-has-children {
	.editor-block-types-list__item-icon {
		background: $white;
		margin-right: 3px;
		margin-bottom: 6px;
		padding: 9px 20px 9px;
		position: relative;
		top: -2px;
		left: -2px;
		box-shadow: 0 0 0 1px $light-gray-500;
	}

	// Show a "stacked card" below an item that has children.
	.editor-block-types-list__item-icon-stack {
		display: block;
		background: $white;
		box-shadow: 0 0 0 1px $light-gray-500;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1; // Show below the card as a shadow
		bottom: -6px;
		right: -6px;
		border-radius: 4px;
	}
}