/* スクリプトによって行われる、ポップアップのスタイル */

@layer script_layer;

@layer script_layer {
	.script_popup {
		display: block;
		position: fixed;
		box-sizing: border-box;
		max-block-size: 100dvb;
		block-size: min(max(93.75dvb, 20rem), 100dvb); /* 高さは93.75dvb、ただし20rem確保 */
		max-inline-size: 100dvi;
		inline-size: min(max(93.75dvi, 20rem), 100dvi); /* 幅は93.75dvi、ただし20rem確保 */
		border-width: clamp(0px, calc((100dvi - 20rem) * 10), 2px); /* 画面幅が狭いとき、ボーダーを消す */
		background-color: var(--body_background_color);
		color: var(--body_color);

		visibility: hidden;
		&:where([open]) {
			visibility: visible;
		}

		& :where(.script_window) {
			overflow: auto;
		}
		& :where(.script_popup_heading) {
			font-size: 1.5rem;
			text-align: center;
		}
		& :where(.full_size_photo) {
			display: block;
			max-height: 75dvb;
			max-width: 100%;
		}
		& :where(.script_popup_description) {
			text-align: center;
		}
		& :where(.script_close_button) {
			display: block;
			margin-block-end: 0.5rem;
		}
	}
	.event :where(.script_open_button) {
		display: block;
		inline-size: 100%;
		margin-inline: auto;
		padding: 0;
		border-style: none;
		/* ポップアップ内以外の写真はクリックで開くことが伝わるようにカーソルを変更 */
		cursor: zoom-in;
	}

	/* アニメーション不要の設定をしていない場合、transitionを設定 */
	@media (prefers-reduced-motion: no-preference) {
		.script_popup {
			--min_scale: 50%;

			opacity: 0;
			transition-property: opacity, transform;
			transform: scale(var(--min_scale));
			transition-duration: 125ms;

			&:where([open]) {
				opacity: 1;
				visibility: visible;
				transform: scale(100%);
			}
		}
		.script_close_transitioning {
			/* ポップアップを閉じる際のトランジション中 */
			opacity: 0;
			transform: scale(var(--min_scale));

			& :where(.script_window) {
				/* 閉じるときのトランジション中にスクロールバーが出ないように */
				overflow: hidden;
			}
		}
	}
}