/* Preview area: no padding, so it matches the downloaded file edge to edge.
   Checkerboard so a transparent background is visible. */
.qr-preview {
	max-width: 400px;
	aspect-ratio: 1;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #eee 25%, transparent 25%),
		linear-gradient(-45deg, #eee 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #eee 75%),
		linear-gradient(-45deg, transparent 75%, #eee 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.qr-preview svg {
	display: block;
	width: 100%;
	height: auto;
}

#qr-encoded {
	word-break: break-all;
}

/* Style picker tiles; the selected one is dark with a white icon */
.style-option {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0.5rem;
	border-color: #dee2e6;
	background: #f8f9fa;
	color: #212529;
}

.style-option svg {
	display: block;
	width: 100%;
	height: 100%;
}

.style-option:hover {
	border-color: #adb5bd;
	background: #e9ecef;
	color: #212529;
}

.style-option.active,
.style-option.active:hover {
	border-color: #212529;
	background: #212529;
	color: #fff;
}

/* Download modal preview */
#download-preview {
	max-width: 240px;
}

/* Format choice in the download modal: the description goes white with the selected button */
.btn-check:checked + .btn .text-muted {
	color: inherit !important;
}