/*
 * Modal text dialog (store hf/dialog, assets/js/dialog.js): a light panel
 * over a dimmed page, close button in the corner, long text scrolls inside.
 * First used by the testimonial card.
 */

.hf-dialog
{
	width: min(100% - 2rem, 42rem);
	max-width: none;
	max-height: min(100% - 2rem, 50rem);
	padding: 0;
	border: 0;
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-surface);
	box-shadow: 0 24px 64px color-mix(in srgb, var(--hf-color-heading) 28%, transparent);
	color: var(--hf-color-text);
}

/* Only while open: a display value on .hf-dialog would show it closed too. */
.hf-dialog[open]
{
	display: flex;
	flex-direction: column;
}

.hf-dialog::backdrop
{
	background: color-mix(in srgb, var(--hf-color-heading) 62%, transparent);
}

.hf-dialog__body
{
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hf-dialog__close
{
	position: absolute;
	z-index: 1;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hf-color-surface);
	color: var(--hf-color-heading);
	cursor: pointer;
	place-items: center;
	transition: background-color var(--hf-transition);
}

.hf-dialog__close:hover
{
	background: var(--hf-color-band);
}

.hf-dialog__close-icon
{
	width: 1.5rem;
	height: 1.5rem;
}