// Front-end Styles
// v1 blocks use div wrapper - v2 blocks use figure wrapper.
div.wp-block-coblocks-gallery-masonry {
	position: relative;

	ul {
		list-style: none !important;
		padding: 0 !important;
	}

	ul:not([class*="gutter"]) {
		margin-left: 0 !important;
	}

	li {
		margin: 0 !important;
	}

	figure {
		margin: 0;
		overflow: hidden;
	}

	img {
		height: auto;
		vertical-align: bottom;
		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;
		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;
		}
	}
}

// Editor styles.
body[class*="version-5-7"],
body[class*="version-5-6"],
body[class*="version-5-5"] {
	[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;
			}
		}

		// Fixes issue where figures are set to display 100% if alignfull is set.
		.coblocks-gallery--figure {
			width: auto !important;

			&.is-selected {
				border-radius: $radius-block-ui + 2; // Additional because we modify the selected state.

				&::after {
					border-radius: $radius-block-ui + 2;
					box-shadow: inset 0 0 0 $border-width + 1 var(--wp-admin-theme-color, #007cba), inset 0 0 0 3px $white;
				}
			}

			img {
				vertical-align: bottom;
			}
		}

		// Fixes issue with multiple dropzones displaying when dropping in an image.
		.components-drop-zone.is-active {

			+ ul li:last-child .components-drop-zone {
				display: none;
			}
		}

		// Captions.
		.block-editor-rich-text {
			bottom: 0;
			left: 0;
			max-height: 100%;
			overflow-y: auto;
			position: absolute;
			right: 0;
			width: 100%;

			.editor-rich-text__tinymce {
				color: inherit;

				a {
					color: inherit;
				}

				&:not(.mce-content-body) {
					opacity: 0.6;
				}

				&:focus a[data-mce-selected] {
					opacity: 0.2;
				}
			}
		}

		.block-editor-rich-text figcaption:not([data-is-placeholder-visible="true"]) {
			overflow: hidden;
			position: relative !important;
		}

		.is-selected .block-editor-rich-text {
			// IE calculates this incorrectly, so leave it to modern browsers.
			@supports (position: sticky) {
				bottom: 4px;
				left: 4px;
				margin-top: -4px;
				right: 4px;
				width: calc(100% - 8px);
			}

			figcaption {
				padding-bottom: 6px !important;
			}

			// Override negative margins so this toolbar isn't hidden by overflow.
			// Overflow is needed for long captions.
			.editor-rich-text__inline-toolbar {
				top: 0;
			}

			// Make extra space for the inline toolbar.
			.editor-rich-text__tinymce {
				padding-top: 48px;
			}
		}

		// Tweak the position of the figcaption if Custom URL is set.
		.components-coblocks-gallery-item__image-link + img + .block-editor-rich-text {
			margin-bottom: 34px;
		}

		.wp-block-coblocks-gallery-masonry ul {
			margin: 0;
		}
	}

	[data-type="core/group"] .wp-block-coblocks-gallery-masonry {
		margin-bottom: 40px !important;
		margin-top: 40px !important;
	}

	// Shim to fix styles in the previewer.
	.block-editor-inserter__preview-content .wp-block-coblocks-gallery-masonry {

		.coblocks-gallery--item:last-child {
			display: none;
		}
	}

	// Needed until GB 6.9 is merged into core or backward support.
	// Hide the placeholder when not selected.
	.block-editor-block-list__block[data-type="coblocks/gallery-masonry"]:not(.is-selected):not(.is-focused) .coblocks-gallery {

		div.components-form-file-upload {
			display: none;
		}
	}
}
