/*
 * ポップアップの表示スタイル。
 *
 * .ja-popup は画面全体を覆うが、クリックを受け取るのはパネルと
 * （表示している場合のみ）オーバーレイだけにする。コンテナがクリックを
 * 受け取ってしまうと、オーバーレイ無しの表示位置（右下・左下・上部バー）で
 * ページ全体が操作できなくなるため。
 */
.ja-popup {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	pointer-events: none;
}

.ja-popup.is-active {
	display: block;
}

.ja-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.ja-popup--has-overlay .ja-popup__overlay {
	pointer-events: auto;
}

.ja-popup:not( .ja-popup--has-overlay ) .ja-popup__overlay {
	background: transparent;
}

.ja-popup.is-active .ja-popup__overlay {
	opacity: 1;
}

.ja-popup__panel {
	/*
	 * 表示位置ごとの基準の変形（--ja-popup-base）と、出現アニメーション用の
	 * ずらし（--ja-popup-shift）を分けて合成する。1つの transform に
	 * まとめると、位置指定側の指定がアニメーション側を打ち消してしまう。
	 */
	--ja-popup-base: translate( 0, 0 );
	--ja-popup-shift: translateY( 12px );

	position: absolute;
	pointer-events: auto;
	width: min( var( --ja-popup-width, 480px ), calc( 100vw - 32px ) );
	max-height: calc( 100vh - 32px );
	max-height: calc( 100dvh - 32px );
	overflow-y: auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.2 );
	padding: 32px;
	transform: var( --ja-popup-base ) var( --ja-popup-shift );
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ja-popup.is-active .ja-popup__panel {
	--ja-popup-shift: translateY( 0 );
	opacity: 1;
}

.ja-popup--center .ja-popup__panel {
	--ja-popup-base: translate( -50%, -50% );
	top: 50%;
	left: 50%;
}

.ja-popup--bottom-right .ja-popup__panel {
	bottom: 16px;
	right: 16px;
}

.ja-popup--bottom-left .ja-popup__panel {
	bottom: 16px;
	left: 16px;
}

.ja-popup--top .ja-popup__panel {
	--ja-popup-base: translateX( -50% );
	top: 0;
	left: 50%;
	border-radius: 0 0 8px 8px;
}

/* 動きを減らす設定にしている環境ではアニメーションさせない。 */
@media ( prefers-reduced-motion: reduce ) {
	.ja-popup__panel,
	.ja-popup__overlay {
		transition: none;
	}

	.ja-popup__panel {
		--ja-popup-shift: translateY( 0 );
	}
}

.ja-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

.ja-popup__close:hover {
	color: #000;
}

.ja-popup__close:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.ja-popup__panel:focus {
	outline: none;
}

.ja-popup__content {
	font-size: 16px;
	line-height: 1.7;
}

/* モーダル表示中の背面スクロールを止める。 */
body.ja-popup-scroll-locked {
	overflow: hidden;
}