@use "@wordpress/base-styles/breakpoints" as *;
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

// Adding `figure` to the selector increases the specificity above the global
// styles specificity, which is levelled at 0-1-0. We should figure out why
// `figure` is needed.
:root :where(figure.wp-block-gallery) {
	// Override the default list style type _only in the editor_
	// to avoid :not() selector specificity issues.
	// See https://github.com/WordPress/gutenberg/pull/10358

	display: block;

	> .blocks-gallery-caption {
		flex: 0 0 100%;
	}

	> .blocks-gallery-media-placeholder-wrapper {
		flex-basis: 100%;
	}

	.wp-block-image {
		.components-notice.is-error {
			display: block;
		}
		.components-notice__content {
			margin: 4px 0;
		}
		.components-notice__dismiss {
			position: absolute;
			top: 0;
			right: 5px;
		}
	}

	// @todo this deserves a refactor, by being moved to the toolbar.
	.block-editor-media-placeholder.is-appender {
		.components-placeholder__label {
			display: none;
		}
		.block-editor-media-placeholder__button {
			margin-bottom: 0;
		}
	}
	.block-editor-media-placeholder {
		margin: 0;
		.components-placeholder__label {
			display: flex;
		}
		figcaption {
			z-index: 2;
		}
	}

	// Shown while image is being uploaded
	.components-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -9px;
		margin-left: -9px;
	}
}

/**
 * Gallery inspector controls settings.
 */
.gallery-settings-buttons {
	.components-button:first-child {
		margin-right: 8px;
	}
}

/**
 * Deprecated css past this point. This can be removed once all galleries are migrated
 * to V2.
 */
.blocks-gallery-item {
	// Hide the focus outline that otherwise briefly appears when selecting a block.
	figure:not(.is-selected):focus,
	img:focus {
		outline: none;
	}

	figure.is-selected {

		&::before {
			box-shadow: 0 0 0 $border-width $white inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
			content: "";
			// Shown in Windows 10 high contrast mode.
			outline: 2px solid transparent;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1;
			pointer-events: none;
		}
	}

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

	.block-editor-media-placeholder {
		margin: 0;
		height: 100%;

		.components-placeholder__label {
			display: flex;
		}
	}
}

.wp-block-gallery ul.blocks-gallery-grid {
	padding: 0;
	// Some themes give all <ul> default margin instead of padding.
	margin: 0;
}

.wp-block-update-gallery-modal {
	@include break-small() {
		max-width: $break-mobile;
	}
}

.wp-block-update-gallery-modal-buttons {
	display: flex;
	justify-content: flex-end;
	gap: $grid-unit-15;
}