@import './view.scss';
@import './variables.scss';
@import '../../shared/styles/gutenberg-colors.scss';

// inspired by from assets/shared/_animations loading-fade
@keyframes tiled-gallery-img-placeholder {
	0% {
		background-color: var( --color-neutral-0 );
	}
	50% {
		background-color: rgba( var( --color-neutral-0-rgb ), 0.5 );
	}
	100% {
		background-color: var( --color-neutral-0 );
	}
}

.wp-block-jetpack-tiled-gallery {
	// Ensure that selected image outlines are visibile
	padding-left: 4px;
	padding-right: 4px;

	&.is-style-square,
	&.is-style-circle {
		.tiled-gallery__item.is-transient img {
			// Transient images (no src attribute) occupy no vertical space.
			// If on a row by themself, the row is hidden.
			// By setting the bottom margin, ensure they occupy the correct vertical space.
			margin-bottom: 100%;
		}
	}

	.tiled-gallery__item {
		// Hide the focus outline that otherwise briefly appears when selecting a block.
		> img:focus {
			outline: none;
		}

		> img {
			// Inspired by Calypso's placeholder mixin
			animation: tiled-gallery-img-placeholder 1.6s ease-in-out infinite;
		}

		&.is-selected {
			outline: 4px solid $tiled-gallery-selection;

			// Disable filters when selected
			filter: none;
			&::before,
			&::after {
				content: none;
			}
		}

		&.is-transient {
			height: 100%;
			width: 100%;
			img {
				background-position: center;
				background-size: cover;
				height: 100%;
				opacity: 0.3;
				width: 100%;
			}
		}
	}

	.tiled-gallery__add-item {
		margin-top: $tiled-gallery-gutter;
		width: 100%;

		.components-form-file-upload,
		.components-button.tiled-gallery__add-item-button {
			width: 100%;
			height: 100%;
		}

		.components-button.tiled-gallery__add-item-button {
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-shadow: none;
			border: none;
			border-radius: 0;
			min-height: 100px;

			.dashicon {
				margin-top: 10px;
			}

			&:hover,
			&:focus {
				border: 1px solid $dark-gray-500;
			}
		}
	}

	.tiled-gallery__item__inline-menu {
		background-color: $tiled-gallery-selection;
		display: inline-flex;
		padding: 0 0 2px 2px;
		position: absolute;
		right: 0;
		top: 0;

		.components-button {
			color: var( --color-white );
			&:hover,
			&:focus {
				color: var( --color-white );
			}
		}
	}

	.tiled-gallery__item__remove {
		padding: 0;
	}

	.tiled-gallery__item .components-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0;
		transform: translate( -50%, -50% );
	}

	// Hide upload buttons in style picker preview
	.editor-block-preview__content & {
		.editor-media-placeholder {
			display: none;
		}
	}
}

.tiled-gallery__filter-picker-menu {
	$active-item-outline-width: 2px;
	padding: 7px;

	// Leave space between elements for active state styling
	.components-menu-item__button + .components-menu-item__button {
		margin-top: $active-item-outline-width;
	}

	.components-menu-item__button.is-active {
		color: $dark-gray-900;
		box-shadow: 0 0 0 $active-item-outline-width $dark-gray-500 !important;
	}
}