/**
 * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
@use 'sass:math';

#template-picker {
	.template-container:not(.hidden) {
		display: flex;
		flex-wrap: wrap;
		a {
			$size: 170px;
			$sizeY: math.div($size, 210) * 297;
			$space: 10px;
			border-radius: var(--border-radius);
			border: 1px solid var(--color-border);
			margin: $space;
			position: relative;

			&:hover,
			&:focus {
				border-color: var(--color-primary-element);
			}

			> span {
				display: flex;
				flex-direction: column;
				width: $size;
				margin: $space;
				cursor: pointer;
				> img,
				> span {
					width: $size;
					height: $sizeY;
					background-color: var(--color-background-dark);
					background-size: 24px;
				}
				> h2 {
					margin-top: $space;
					font-size: inherit;
				}
			}
		}
	}
}