// Modal Dialog
.px2-modal {
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: var(--px2-font-family, $px2-font-family);
	padding: 0;
	margin: 0;
	border: none;
	container-type: inline-size;

	&--no-title .px2-modal__header {
		display: none;
	}
	&--no-btn .px2-modal__footer {
		display: none;
	}
	&--background {
		background: transparent;
	}

	> form {
		// display: inline;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	&__close {
		position: absolute;
		right: 10px;
		top: 8px;
		width: 40px; height: 40px;
		z-index: 1150;
		button {
			position: absolute;
			left: 0;
			right: 0;
			display: block;
			width: 100%; height: 100%;
			padding: 0;
			margin: 0;
			border-radius: 0;
			border: none;
			background-color: transparent;
			color: #999;
			cursor: pointer;
			&::before,
			&::after {
				content: "";
				border-bottom: 1px solid #000;
				width: 70%;
				position: absolute;
				top: 50%;
				left: 10%;
			}
			&::before {
				transform: rotate(45deg);
			}
			&::after {
				transform: rotate(-45deg);
			}
			&:hover {
				border: none;
				&::before,
				&::after {
					border-bottom: 1px solid #666;
				}
			}
			&[data-px2-modal-locked] {
				opacity: 0.2;
			}
		}
	}

	&__dialog {
		position: relative;
		top: 0; left: 0;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		color: $px2-text-color; // fallback
		color: var(--px2-text-color, $px2-text-color);
		background-color: $px2-background-color; // fallback
		background-color: var(--px2-background-color, $px2-background-color);
		box-sizing: border-box;
		padding: 10px 0;
		margin: 20px auto;
		width: calc(100% - 40px);
		max-width: 520px;
		height: auto;
		max-height: calc(100% - 40px);
		overflow: visible;
		border-radius: 5px;
		font-size: medium;

		animation: px2-modal--initial .3s ease 0s 1 normal none running;
		transition: transform .3s, opacity .3s;

		container-type: inline-size;

		&--closed {
			transform: translateY(-10px);
			opacity: 0;
		}
	}

	&__header {
		padding: 18px 40px 8px 20px;
		margin-top: -10px;
		margin-bottom: 0;
		z-index: 1100;
	}

	&__body {
		position: relative;
		top: 0; left: 0;
		padding: 0 20px;
		flex-grow: 1;
		box-sizing: border-box;
		z-index: 1050;
	}
	&__body-inner {
		display: block;
		box-sizing: border-box;
		container-type: inline-size;
	}
	&__body,
	&--content-fill &__body-inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow: auto;
		> * {
			flex-grow: 100;
		}
	}
	&--content-fill &__body {
		padding: 0;
	}

	&__title {
		font-weight: bold;
		outline: none;
	}

	&__footer {
		margin: 0 0 -10px 0;
		padding: 10px 0 12px 0;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		flex-wrap: nowrap;
		flex-shrink: 0;
		gap: 30px;
		overflow: auto;
		max-height: 30vh;
		z-index: 1100;

		&-primary,
		&-secondary {
			box-sizing: content-box;
			width: fit-content;
			padding: 0 20px;
		}

		&-primary>ul,
		&-secondary>ul,
		>ul {
			display: flex;
			justify-content: flex-end;
			flex-wrap: nowrap;
			gap: 5px;
			margin: 0;
			padding: 0;
			>li {
				list-style-type: none;
				margin: 0;
				padding: 0;
				white-space: nowrap;
			}
		}
		&-secondary>ul {
			justify-content: flex-start;
		}
	}
}
@keyframes px2-modal--initial {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes px2-modal--initial-drawer-left {
	0% {
		transform: translateY(0);
		opacity: 1;
		left: -100%;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
		left: 0;
	}
}
@keyframes px2-modal--initial-drawer-right {
	0% {
		transform: translateY(0);
		opacity: 1;
		right: -100%;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
		right: 0;
	}
}

// Drawer (Left/Right)
.px2-modal.px2-modal--type-drawer-left,
.px2-modal.px2-modal--type-drawer-right {
	background: rgba(0, 0, 0, 0.1);

	.px2-modal__dialog {
		position: absolute;
		top: 0;
		left: auto;
		right: auto;
		width: 360px;
		max-width: calc(100% - 20px);
		height: 100%;
		max-height: 100%;
		margin: 0;
		border-radius: 0;
		&--closed {
			transform: translateY(0);
			opacity: 1;
		}
	}
}
.px2-modal.px2-modal--type-drawer-left {
	.px2-modal__dialog {
		left: 0;
		animation: px2-modal--initial-drawer-left .3s ease 0s 1 normal none running;
		transition: transform .3s, opacity .3s, left .3s;
		&--closed {
			left: -100%;
		}
	}
}
.px2-modal.px2-modal--type-drawer-right {
	.px2-modal__dialog {
		right: 0;
		animation: px2-modal--initial-drawer-right .3s ease 0s 1 normal none running;
		transition: transform .3s, opacity .3s, right .3s;
		&--closed {
			right: -100%;
		}
	}
}