.wp-block-coblocks-gallery-collage {

	&__figure {

		img {
			transition: opacity 0.1s linear;
		}

		&.is-transient img {
			opacity: 0.3;
		}

		&.is-selected {

			&::after {
				border-radius: $radius-block-ui;
				bottom: 0;
				box-shadow: 0 0 0 $border-width $white, 0 0 0 3px var(--wp-admin-theme-color, #007cba);
				content: "";
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
			}
		}
	}

	&__item {
		transition: padding $animation-transition-default;
	}

	// Hide image placeholder - necessary in 5.3 until GB 6.9+ is merged.
	.wp-block-coblocks-gallery-collage__figure:nth-child(2) {
		display: none;
	}

	.coblocks-gallery-item__button-replace {
		border: none;
		box-shadow: none;
		padding: 6px 12px;
	}
}

[data-type="coblocks/gallery-collage"] {

	// Remove selected state.
	&.block-editor-block-list__block::after {
		box-shadow: none !important;
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	&[data-align="full"] .wp-block-coblocks-gallery-collage ul {
		padding-left: 1em;
		padding-right: 1em;
	}

	.block-editor-media-placeholder__upload-button {

		@include break-small-max() {
			display: none;
		}
	}

	.editor-media-placeholder__media-library-button {

		@include break-small-max() {
			background: transparent;
			border: 0;
			box-shadow: none !important;
			display: inline-block;
			height: 100%;
			text-align: center;
			width: 100%;
		}
	}

	.block-editor-media-placeholder {
		background: $white;
		min-height: inherit;
		outline-offset: -1px;

		.is-dark-theme & {
			background: $light-opacity-light-200;
		}

		.components-placeholder__label,
		.components-placeholder__instructions {
			display: none;
		}

		.components-placeholder__fieldset {
			align-content: center;
			align-items: center;
			height: 100%;
			justify-content: center;
			left: 0;
			margin-bottom: 0 !important;
			margin-right: 0 !important;
			max-width: 100%;
			position: absolute;
			top: 0;
			width: 100%;

			.components-button {
				margin: 2px;
			}
		}
	}

	.is-style-layered {

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

		// Move the close button where its visible on the Layered style.
		li:nth-child(4) .block-library-gallery-item__inline-menu {
			left: 2px;
			right: auto;
		}
	}

	.is-dark-theme .block-editor-media-placeholder {
		background: $light-opacity-light-200;
	}

	// Captions.
	.block-editor-rich-text {
		bottom: 0;
		left: 0;
		max-height: 100%;
		position: absolute;
		right: 0;
		width: 100%;
		z-index: 2;

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

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

	.components-coblocks-gallery-item__image-link ~ .coblocks-gallery--caption {
		bottom: 3em;
	}
}

.block-editor-block-preview__content .wp-block-coblocks-gallery-collage {

	ul {
		list-style-type: none;
	}

	.components-placeholder__fieldset {
		display: none;
	}
}
