.templates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: calc(var(--spacing-base) * 4);
}

.template {
	all: unset;
	cursor: pointer;
	border-radius: calc(var(--jp-border-radius) / 2);
	position: relative;

	img {
		display: block;
		max-width: 100%;
		height: auto;
		border-radius: calc(var(--jp-border-radius) / 2);
		pointer-events: none;
	}

	&::after {
		content: "";
		opacity: 0;
		transform: translateY(5px);
		transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
		position: absolute;
		top: calc(var(--spacing-base) * -1.5);
		right: calc(var(--spacing-base) * -1.5);
		width: calc(var(--spacing-base) * 3);
		height: calc(var(--spacing-base) * 3);
		border-radius: 50%;
		background-color: var(--jp-white);
		background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2211%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%2309B585%22%20stroke-width%3D%221.5%22%20d%3D%22m11.327.53-6.75%209.08L.662%206.7%22/%3E%3C/svg%3E);
		background-repeat: no-repeat;
		background-position: center;
	}

	&:focus:not(:disabled) {
		box-shadow:
			0 0 0 var(--wp-admin-border-width-focus)
			var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
		outline: 3px solid transparent;
	}
}

.template--active {

	&::after {
		transform: translateY(0);
		opacity: 1;
	}
}
