[data-type="coblocks/food-item"] {
	margin-top: 0;

	.is-empty .wp-block-coblocks-food-item__figure {
		margin-bottom: 0;
	}

	.block-editor-media-placeholder {
		align-items: center;
		height: 100%;
		left: 0;
		margin-bottom: 0;
		position: absolute;
		top: 0;
		width: 100%;

		.components-placeholder__instructions {
			text-align: center;
		}

		.components-placeholder__fieldset {
			justify-content: center;
		}

		&.is-medium {

			.components-placeholder__fieldset {
				align-items: center;
			}

			.components-placeholder__label .dashicon,
			.components-button {
				margin-right: 0;
			}
		}
	}

	.components-spinner {
		z-index: 9;
	}

	.wp-block-coblocks-food-item {

		&__figure {

			&.is-selected {

				&::after {
					bottom: 0;
					box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color, #007cba);
					content: "";
					left: 0;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1;
				}
			}
		}

		&__attribute.components-button {
			color: inherit;
			height: auto;
			min-width: auto;
			opacity: 0.55;
			padding: 1px;

			&:not(.is-toggled):hover,
			&:not(.is-toggled):focus {
				opacity: 0.725;
			}

			&.is-toggled {
				opacity: 1;
			}
		}
	}

	.rich-text {
		margin: 0;
	}

	.is-style-list & {

		.wp-block-coblocks-food-item__figure {
			margin-right: 20px;
			max-width: 100px;
			padding-top: 0;
		}

		.block-editor-media-placeholder {
			height: 75px;
			min-height: 75px;
			padding: 0 !important;
			position: relative;

			@include break-small() {
				height: 100px;
				min-height: 100px;
			}

			.dashicon {
				margin: 0;
			}

			.components-placeholder__label {
				display: block;
				left: 50%;
				margin: -10px 0 0 -10px;
				position: absolute;
				top: 50%;
			}

			.components-drop-zone__content {

				.dashicon {
					height: 20px;
					margin: 0 auto 5px;
					width: 20px;
				}

				.components-drop-zone__content-text {
					font-size: 12px;
					margin: 0 auto;
					max-width: 80%;
				}
			}

			// Hide the Upload button.
			.components-form-file-upload .block-editor-media-placeholder__button {
				display: none;
			}

			// Restyle the Media Gallery button to be overlaid over the component.
			&__button {
				background: transparent !important;
				border: 0;
				bottom: 0;
				box-shadow: none !important;
				height: 100%;
				left: 0;
				position: absolute;
				right: 0;
				text-indent: -999em;
				top: 0;
				width: 100%;
			}
		}
	}
}
