/*	–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	CORE/MODAL/CLASSES.CSS
	––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/**
 * VISIOFRAMEWORK
 * This file is part of VISIOFRAMEWORK.
 * @package		visioframework
 * @author		Agência Visio <contato@agenciavisio.com.br>
 * @copyright	Copyright (c) 2023-present. M. Souza & Souza LTDA. (CNPJ: 21.284.748/0001-33). All rights reserved.
 * @license		Proprietary
 * @link		https://www.agenciavisio.com.br
 */

/*	Every class here is `modal--*`: Bootstrap owns `.modal`, `.modal-dialog` and
	`.modal-body`, and the theme restyles them. The full-screen switch below the
	site's Mobile breakpoint is injected by ModalCSSInjector. */
.modal--dialog {
	width				: min(var(--modal-width, 1140px), calc(100% - 2rem));
	max-width			: none;
	/*	`dvh` tracks the mobile toolbars; the `vh` line is the pre-iOS 15.4 fallback */
	max-height			: calc(100vh - 2rem);
	max-height			: calc(100dvh - 2rem);
	padding				: 0;
	border				: 0;
	border-radius		: var(--bs-border-radius-lg);
	overflow-x			: hidden;
	overflow-y			: auto;
	overscroll-behavior	: contain;
	/*	A thin thumb on a clear track: the classic Windows bar would sit outside a rounded panel.
		Mid-gray because the panel takes each site's own surface, light or dark. */
	scrollbar-width		: thin;
	scrollbar-color		: rgba(128, 128, 128, 0.6) transparent;
	color				: inherit;
	background-color	: transparent;
	transition			: opacity 0.2s ease-out, translate 0.2s ease-out;
}

.modal--dialog[open] {
	opacity		: 1;
	translate	: none;
}

/*	Entry only, and `translate` must come to rest at `none`: any transform makes the
	dialog the containing block of a fixed layer inside it, shrinking it to the panel. */
@starting-style {
	.modal--dialog[open] {
		opacity		: 0;
		translate	: 0 1rem;
	}
}

/*	No UA rule hides a closed dialog where <dialog> is unknown (iOS before 15.4) */
.modal--dialog:not([open]) {
	display	: none;
}

.modal--dialog::backdrop {
	background-color	: rgba(0, 0, 0, 0.6);
	transition			: background-color 0.2s ease-out;
}

@starting-style {
	.modal--dialog[open]::backdrop {
		background-color	: rgba(0, 0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.modal--dialog,
	.modal--dialog::backdrop {
		transition	: none;
	}
}

.modal--width-md {
	--modal-width	: 720px;
}

.modal--width-lg {
	--modal-width	: 960px;
}

.modal--width-xl {
	--modal-width	: 1140px;
}

.modal--panel.box {
	/*	`clip`, not `.box`'s `hidden`: `hidden` would make the panel the sticky header's
		scrollport and the X would scroll away. `visible` is the pre-Safari 16 fallback. */
	overflow	: visible	!important;
	overflow	: clip		!important;
	/*	Keeps a panel backdrop (z-n1) in front of the panel's own surface, not behind it */
	isolation	: isolate;
	min-height	: 100%;
}

.modal--header {
	position		: sticky;
	top				: 0;
	z-index			: 2;
	display			: flex;
	justify-content	: flex-end;
	padding			: 0.75rem;
	pointer-events	: none;
}

/*	A scrim of its own, so the X reads over whatever scrolls under it */
.modal--close {
	display				: inline-flex;
	align-items			: center;
	justify-content		: center;
	width				: 2.75rem;
	height				: 2.75rem;
	padding				: 0;
	border				: 0;
	border-radius		: 50%;
	font-size			: 1.25rem;
	line-height			: 1;
	color				: #fff;
	background-color	: rgba(0, 0, 0, 0.55);
	cursor				: pointer;
	pointer-events		: auto;
	transition			: background-color 0.15s ease-out;
}

.modal--close:hover {
	background-color	: rgba(0, 0, 0, 0.75);
}

.modal--close:focus-visible {
	outline			: 2px solid #fff;
	outline-offset	: 2px;
	box-shadow		: 0 0 0 4px rgba(0, 0, 0, 0.55);
}

/*	The contents are drawn for a section, whose container gives them their side margins.
	A modal made of sections clears this with `box_style_config___body` (px-0 wins). */
.modal--body {
	padding	: 0 clamp(1rem, 3vw, 2rem) 2rem;
}

/*	The page holds still behind the modal. Not `scrollbar-gutter: stable`: neither the
	::backdrop nor a fixed layer paints the reserved gutter, which shows as a raw strip.
	The script measures the scrollbar instead, and the body takes its width as padding. */
:root:has(dialog.modal--dialog[open]) {
	overflow	: hidden;
}

:root:has(dialog.modal--dialog[open]) body {
	padding-right	: var(--modal-scrollbar-gap, 0px);
}