dialog.global-dialog-modal {
	--global-modal-margin-x: 0.25rem;
	--global-modal-margin-y: 0.25rem;
	--global-modal-border-color: rgba(0, 0, 0, 0.175);
	--global-modal-header-bg: #fff;
	--global-modal-header-color: #212529;
	--global-modal-header-border-color: #dee2e6;
	--global-modal-close-filter: none;
	--global-modal-width: calc(100vw - var(--global-modal-margin-x) * 2);

	@media (min-width: 576px) {
		--global-modal-width: 500px;
	}

	@media (min-width: 768px) {
		--global-modal-margin-y: 0.5rem;
		--global-modal-margin-x: 0.5rem;
		--global-modal-width: 700px;
	}

	@media (min-width: 992px) {
		--global-modal-margin-y: 1rem;
		--global-modal-margin-x: 1rem;
		--global-modal-width: 900px;
	}

	@media (min-width: 1100px) {
		--global-modal-margin-y: 1.25rem;
		--global-modal-margin-x: 1.25rem;
		--global-modal-width: 1040px;
	}

	@media (min-width: 1200px) {
		--global-modal-margin-y: 1.5rem;
		--global-modal-margin-x: 1.5rem;
		--global-modal-width: 1140px;
	}

	@media (min-width: 1300px) {
		--global-modal-margin-y: 1.75rem;
		--global-modal-margin-x: 1.75rem;
		--global-modal-width: 1240px;
	}

	@media (min-width: 1440px) {
		--global-modal-width: 1300px;
	}

	@media (min-width: 1800px) {
		--global-modal-width: 1700px;
	}

	@media (min-width: 2000px) {
		--global-modal-width: 1800px;
	}

	position: relative;
	max-width: var(--global-modal-width);
	max-height: calc(100vh - var(--global-modal-margin-y) * 2);
	min-width: 30vw;
	width: fit-content;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.75));
	overflow: visible;

	&[open] {
		display: flex;

		&.global-dialog-modal-full-height {
			height: auto;
		}

		&.global-dialog-modal-full-width {
			width: auto;
		}

		&:has(.global-dialog-modal-body > :is(iframe, object)) {
			width: auto;
			height: auto;

			.global-dialog-modal-body {
				padding: 0;
				display: flex;

				> :is(iframe, object) {
					width: 100%;
				}
			}
		}
	}

	&::backdrop {
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(0.25rem);
		animation: fadeIn 0.2s ease-out;
	}

	.global-dialog-container {
		border: 1px solid var(--global-modal-border-color);
		border-radius: 0.5rem;
		display: flex;
		flex-direction: column;
		max-height: 100%;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.form-control {
		display: flex;
		width: 100%;
		padding: 0.375rem 0.75rem;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #212529;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		appearance: none;
		border-radius: 0.375rem;
		transition:
			border-color 0.15s ease-in-out,
			box-shadow 0.15s ease-in-out;

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}

		&:focus {
			color: #212529;
			background-color: #fff;
			border-color: #86b7fe;
			outline: 0;
			box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
		}

		&::-webkit-date-and-time-value {
			height: 1.5rem;
		}

		&::placeholder {
			color: #6c757d;
			opacity: 1;
		}

		&:is(:disabled, [readonly]) {
			background-color: #e9ecef;
			opacity: 1;
		}

		&.form-control-sm {
			min-height: calc(1.5em + 0.5rem + 2px);
			padding: 0.25rem 0.5rem;
			font-size: 0.875rem;
			border-radius: 0.25rem;
		}
	}

	&.is-opening {
		animation: slideDownFade 0.2s ease-out;
	}

	&.closing {
		animation: slideUpFade 0.2s ease-in forwards;

		&::backdrop {
			animation: fadeOut 0.2s ease-in forwards;
		}
	}

	&.pulse-scale {
		.global-dialog-container {
			animation: modalPulseScale 0.5s ease-out;
		}
	}

	&.is-swapping-out {
		.global-dialog-container {
			animation: contentSwapOut 0.2s ease-in forwards;
		}
	}

	&.is-swapping-in {
		.global-dialog-container {
			animation: contentSwapIn 0.2s ease-out forwards;
		}
	}

	.global-dialog-modal-header {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.25rem 0.75rem;
		background-color: var(--global-modal-header-bg);
		color: var(--global-modal-header-color);
		border-bottom: 1px solid var(--global-modal-header-border-color);

		.global-dialog-modal-title {
			margin: 0;
			font-size: 1.25rem;
			font-weight: 500;
			line-height: 1.5;
		}

		.global-dialog-modal-header-close-button {
			width: 1rem;
			height: 1rem;
			padding: 0.25rem;
			color: inherit;
			background: transparent
				url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
				center/1rem auto no-repeat;
			border: 0;
			border-radius: 0.25rem;
			opacity: 0.5;
			cursor: pointer;
			filter: var(--global-modal-close-filter);
			transition: opacity 0.2s;

			&:hover {
				opacity: 0.75;
			}

			&:focus {
				outline: 0;
				box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
				opacity: 1;
			}
		}
	}

	.global-dialog-modal-sub-header,
	.global-dialog-modal-sub-footer {
		flex-shrink: 0;
		padding: 0.25rem 0.75rem;
		background-color: #fff;
	}

	.global-dialog-modal-sub-header {
		border-bottom: 1px solid #dee2e6;
		color: #6c757d;
	}

	.global-dialog-modal-sub-footer {
		border-top: 1px solid #dee2e6;
	}

	.global-dialog-modal-body {
		background-color: #fff;
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 0.5rem 0.75rem;
		color: #212529;
		line-height: 1.5;
		scroll-behavior: smooth;
		scrollbar-width: thin;
		scrollbar-color: darkgray transparent;
		position: relative;

		&:hover {
			scrollbar-color: gray transparent;
		}
	}

	.global-dialog-modal-footer {
		flex-shrink: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 0.5rem;
		padding: 0.25rem 0.75rem;
		border-top: 1px solid #dee2e6;
		background-color: #fff;

		.global-dialog-modal-footer-actions {
			display: flex;
			gap: 0.5rem;
		}

		.global-dialog-modal-back-wrapper,
		.global-dialog-modal-close-wrapper {
			display: flex;
			:is(.global-dialog-modal-close-button, .global-dialog-modal-action-button) {
				border-radius: 0;

				&:first-child {
					border-top-left-radius: 0.25rem;
					border-bottom-left-radius: 0.25rem;
				}
				&:last-child {
					margin-left: -1px;
					border-top-right-radius: 0.25rem;
					border-bottom-right-radius: 0.25rem;
				}
			}
		}

		:is(.global-dialog-modal-close-button, .global-dialog-modal-action-button) {
			display: inline-flex;
			font-weight: 400;
			line-height: 1.5;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			user-select: none;
			background-color: transparent;
			color: #6c757d;
			border: 1px solid #6c757d;
			padding: 0.25rem 0.5rem;
			font-size: 0.875rem;
			border-radius: 0.25rem;
			transition: all 0.2s ease-in-out;

			&:hover {
				color: #fff;
				background-color: #6c757d;
				border-color: #6c757d;
			}

			&:focus {
				box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
			}
		}

		.global-dialog-modal-action-button.is-theme {
			&:hover {
				color: var(--global-modal-header-color);
				border-color: var(--global-modal-border-color);
				background-color: var(--global-modal-header-bg);
			}
		}
	}

	:is(&.type-primary, &.type-secondary, &.type-success, &.type-danger, &.type-dark, &.type-warning, &.type-info) {
		--global-modal-close-filter: invert(1) grayscale(100%) brightness(200%);
	}

	&.type-primary {
		--global-modal-header-color: #dde9ff;
		--global-modal-header-bg: #5082e4;
		--global-modal-header-border-color: #5082e4;
		--global-modal-border-color: #5082e4;
	}

	&.type-secondary {
		--global-modal-header-color: #abb6c2;
		--global-modal-header-bg: #6d7885;
		--global-modal-header-border-color: #6d7885;
		--global-modal-border-color: #6d7885;
	}

	&.type-success {
		--global-modal-header-color: #dffad5;
		--global-modal-header-bg: #359d1b;
		--global-modal-header-border-color: #359d1b;
		--global-modal-border-color: #359d1b;
	}

	&.type-danger {
		--global-modal-header-color: #ffe6e0;
		--global-modal-header-bg: #e52100;
		--global-modal-header-border-color: #e52100;
		--global-modal-border-color: #e52100;
	}

	&.type-dark {
		--global-modal-header-color: #e9ebed;
		--global-modal-header-bg: #2f3337;
		--global-modal-header-border-color: #2f3337;
		--global-modal-border-color: #2f3337;
	}

	&.type-warning {
		--global-modal-header-color: #f9f0ca;
		--global-modal-header-bg: #b78a19;
		--global-modal-header-border-color: #b78a19;
		--global-modal-border-color: #b78a19;
	}

	&.type-info {
		--global-modal-header-color: #d6f8ff;
		--global-modal-header-bg: #00a3e9;
		--global-modal-header-border-color: #00a3e9;
		--global-modal-border-color: #00a3e9;
	}

	&.type-light {
		--global-modal-header-color: #2f3337;
		--global-modal-header-bg: #e9ebed;
		--global-modal-header-border-color: #e9ebed;
		--global-modal-border-color: #e9ebed;
	}
}

@keyframes slideDownFade {
	from {
		opacity: 0;
		transform: translateY(-2.5rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUpFade {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-2.5rem);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes modalPulseScale {
	0%,
	50%,
	100% {
		transform: scale(1);
		rotate: 0;
	}

	25%,
	75% {
		transform: scale(0.99);
	}

	25% {
		rotate: 0.2deg;
	}

	75% {
		rotate: -0.2deg;
	}
}

@keyframes contentSwapOut {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(0.95);
	}
}

@keyframes contentSwapIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}