[data-type="coblocks/gallery-masonry"] {
	// Remove selected state.
	&.block-editor-block-list__block::after {
		box-shadow: none !important;
	}

	// Adjust because we modify the selected state.
	.block-library-gallery-item__inline-menu {
		top: 1px;

		&.is-left {
			left: 1px;
		}

		&.is-right {
			right: 1px;
		}
	}

	.gallery-media-placeholder-wrapper {
		margin-top: 20px;

		.components-placeholder__fieldset {
			align-items: center;

			button {
				margin-bottom: 0;
			}
		}
	}
}

// We utilize similar styles here as in the style.scss for Masonry block.
// Because of differing markup produced in edit and save we have variation on selectors.
// Eventually we should try to improve these selectors to reduce the code duplication in editor.scss.
figure.wp-block-coblocks-gallery-masonry {
	&.alignwide,
	&.alignfull {
		margin: 0;
	}

	> .masonry-grid {
		column-fill: initial;
		column-gap: 30px;
		transition: all 0.5s ease-in-out;

		figure {
			display: block;
			margin-bottom: 30px;
			margin-top: 0;

			img {
				border: 0;
				display: block;
				font: inherit;
				font-size: 100%;
				height: auto;
				margin: 0;
				max-width: 100%;
				padding: 0;
				width: 100%;
			}

			figcaption {
				background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 50%, transparent);
				bottom: 0;
				font-size: 13px;
				margin-bottom: 0;
				max-height: 100% !important;
				opacity: 0.9;
				overflow: auto;
				padding: 30px 10px 10px !important;
				position: absolute !important;
				text-align: center;
				width: 100%;

				img {
					display: inline;
				}
			}

			// Fix needed for pre 5.9 WordPress
			.components-resizable-box__container {
				display: block;

				.components-resizable-box__handle {
					display: none;
				}
			}
		}

		/* Masonry on tablets */
		@media only screen and (min-width: 768px) and (max-width: 1023px) {
			& {
				column-count: 2;
			}
		}

		/* Masonry on big screens */
		@media only screen and (min-width: 1024px) {
			& {
				column-count: 3;
			}
		}
	}

	&.has-small-gutter .masonry-grid {
		column-gap: calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * 2);

		> figure {
			margin-bottom: calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * 2);
		}
	}

	&.has-medium-gutter .masonry-grid {
		column-gap: calc(var(--coblocks-spacing--2, #{map-get($spacing, 2)}) * 2);

		> figure {
			margin-bottom: calc(var(--coblocks-spacing--2, #{map-get($spacing, 2)}) * 2);
		}
	}

	&.has-large-gutter .masonry-grid {
		column-gap: calc(var(--coblocks-spacing--3, #{map-get($spacing, 3)}) * 2);

		> figure {
			margin-bottom: calc(var(--coblocks-spacing--3, #{map-get($spacing, 3)}) * 2);
		}
	}

	&.has-custom-gutter .masonry-grid {
		column-gap: calc(var(--coblocks-custom-gutter, 0em) * 2);

		> figure {
			margin-bottom: calc(var(--coblocks-custom-gutter, 0) * 2);
		}
	}
}
