// The tiles picker. Every preset is drawn from the pattern it stands for, so
// the catalogue is whatever `vpf_loop_tiles_presets` returns and nothing here
// has to be kept in step with it.
.vp-tiles-presets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 16px;
	max-height: 320px;
	overflow-y: auto;
}

.vp-tiles-preset {
	padding: 4px;
	cursor: pointer;
	background: none;
	border: 1px solid #ddd;
	border-radius: 2px;

	&:hover,
	&:focus-visible {
		border-color: var(--wp-admin-theme-color, #3858e9);
	}

	&.is-active {
		border-color: var(--wp-admin-theme-color, #3858e9);
		box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #3858e9);
	}
}

.vp-tiles-preset__grid {
	display: grid;
	grid-auto-flow: row dense;

	// Tall enough that a tile reads as a tile rather than as a line.
	grid-auto-rows: 9px;
	gap: 2px;

	> span {
		background: currentcolor;
		border-radius: 1px;
		opacity: 0.55;
	}
}

.vp-tiles-preset.is-active .vp-tiles-preset__grid > span {
	opacity: 1;
}

// The preview is refetched on every settings change. Dimming the items in
// place - rather than replacing them with a spinner above the list - is what
// keeps the gallery from jumping out from under the pointer that is still
// changing the setting.
.wp-block-visual-portfolio-item-template {
	position: relative;

	&[aria-busy="true"] > .wp-block-visual-portfolio-item-template__item {
		opacity: 0.6;
		transition: opacity 0.15s ease-in-out;
	}
}

.wp-block-visual-portfolio-item-template__editor-spinner {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	pointer-events: none;

	.components-spinner {
		margin: 0;
	}
}

// Hit-testing, put back over the read-only copies of the item.
//
// A block in a preview is inert, and the boxes above it are the template and
// the item, both switched off with the rest of the pattern. The pointer
// therefore fell through every item but the one being edited: pressing a copy
// selected the gallery instead of making that copy the editable one, and a
// cover that reveals itself on hover only ever revealed the first item.
//
// The copy is the box that takes the pointer back. What it holds stays inert,
// so nothing inside it can be clicked - the press is the one the copy itself
// listens for.
.wp-block-visual-portfolio-item-template__preview {
	pointer-events: auto;
}

// The read-only copy of the item sits between the tile and the blocks, so the
// height chain a tile needs runs through it as well.
.vp-layout-tiles > .wp-block-visual-portfolio-item-template__item > .wp-block-visual-portfolio-item-template__preview {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

// The shape of an item, before the item itself has arrived.
// A shape standing in for an item is the same wash as a picture standing in for
// an image: the dimming the busy list applies to real items would make it six
// times darker, so it is stated at the same weight as that rule.
.wp-block-visual-portfolio-item-template[aria-busy="true"] > .wp-block-visual-portfolio-item-template__skeleton {
	aspect-ratio: 1;
	background: currentcolor;
	border-radius: 2px;
	opacity: 0.1;
}

// A tile is as tall as its pattern says, so a placeholder in one takes the
// height of the cell rather than a square of its own.
.vp-layout-tiles > .wp-block-visual-portfolio-item-template__skeleton {
	aspect-ratio: auto;
}