// Import styles for rendering the static content of deprecated gallery versions.
@import "../v1/deprecated.scss";

// We utilize similar styles here as in the editor.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.masonry-grid {
	column-fill: initial;
	column-gap: 30px;
	transition: all 0.5s ease-in-out;

	&.alignwide,
	&.alignfull {
		margin: 0;
	}

	figure.wp-block-image {
		position: relative;

		&:nth-of-type(1) {
			margin-top: 0 !important;
		}

		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;
			}
		}

	}

	&.has-small-gutter {
		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 {
		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 {
		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 {
		column-gap: calc(var(--coblocks-custom-gutter, 0em) * 2);

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

	/* 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;
		}
	}
}

.is-twentytwenty {
	figure.wp-block-coblocks-gallery-masonry.masonry-grid {
		margin-left: auto;
		margin-right: auto;
	}
}
