.advads-modal {
	@apply fixed inset-0 -z-[1] hidden overflow-auto bg-black/40 opacity-0 pointer-events-none;
	@apply transition-opacity duration-400 ease-in w-full h-full;
}

dialog.advads-modal::backdrop {
	@apply bg-gray-500/40;
}

.advads-modal:target,
.advads-modal[open] {
	@apply table opacity-100 pointer-events-auto z-9999;
}

dialog.advads-modal {
	@apply p-0 border-0 m-0 max-h-screen;
	max-width: 100vw;
}

.advads-modal-content {
	@apply relative bg-[#fefefe] max-w-5xl h-auto mx-auto overflow-y-scroll;

	box-shadow:
		0 4px 8px 0 rgba(0, 0, 0, 0.2),
		0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-sizing: border-box;
	margin-top: calc(5vh + var(--wp-admin--admin-bar--height, 0px));
	margin-bottom: 5vh;
	max-height: calc(90vh - var(--wp-admin--admin-bar--height, 0px));
	animation-name: advads-modal-animatetop;
	animation-duration: 0.4s;
	-webkit-overflow-scrolling: touch;

	&::-webkit-scrollbar {
		@apply w-3 absolute right-0;
	}

	&::-webkit-scrollbar-track {
		@apply bg-transparent shadow-none;
	}

	&::-webkit-scrollbar-thumb {
		@apply bg-border rounded-lg border-3 border-transparent bg-clip-content;
	}
}

.advads-modal-header {
	@apply p-4 sm:flex items-center justify-between border-b border-border;

	h2 { @apply m-0; }

	.advads-modal-close {
		@apply block no-underline text-gray-500;
	}
}

.advads-modal-body {
	@apply p-4;

	h2, h3 {
		font-size: 1.3em;
		margin: 1em 0;
	}
}

.advads-modal-footer {
	@apply bg-gray-50 px-4 py-3 flex sm:px-6 gap-x-4 justify-between border-t border-border;
	position: sticky;
	bottom: 0;
}

@keyframes advads-modal-animatetop {
	from {
		top: -300px;
		opacity: 0
	}
	to {
		top: 0;
		opacity: 1
	}
}

.advads-modal-close:hover,
.advads-modal-close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

a.advads-modal-close-background {
	width: 100%;
	height: 100%;
	position: absolute;
	text-indent: -9999em;
	cursor: default;
}

.advads-ui-autocomplete.ui-front {
	z-index: 10000;
}