.k2-popup {
	position: fixed;
	width: fit-content;
	height: fit-content;
	overflow: scroll;

	display: flex;
	flex-direction: column;

	--translate-x: 0%;
	--translate-y: 0%;
	transform: translateX(var(--translate-x)) translateY(var(--translate-y));

	backdrop-filter: blur(var(--backdrop-blur, 0px));

	--popup-z-index: 200;
	z-index: var(--popup-z-index);
}

.k2-popup.top {
	top: 0;
}

.k2-popup.bottom {
	bottom: 0;
}

.k2-popup.left {
	left: 0;
}

.k2-popup.right {
	right: 0;
}

.k2-popup.center:not(.right, .left) {
	left: 50%;
	--translate-x: -50%;
}

.k2-popup.center:not(.top, .bottom) {
	top: 50%;
	--translate-y: -50%;
}


.k2-popup--full-height {
	height: 100vh;
}

.k2-popup--full-width {
	width: 100vw;
}

.k2-popup--vertical-top {
	justify-content: flex-start;
}

.k2-popup--vertical-center {
	justify-content: space-around; /* do not use center, because it will mess up the content on overflow */
}

.k2-popup--vertical-bottom {
	justify-content: flex-end;
}

.k2-popup--vertical-stretch {
	justify-content: space-between;
}

.k2-popup--horizontal-left {
	align-items: flex-start;
}

.k2-popup--horizontal-center {
	align-items: center;
}

.k2-popup--horizontal-right {
	align-items: flex-end;
}

.k2-popup--horizontal-stretch {
	align-items: stretch;
}

/* Functionality Styling */
.k2-popup.k2-popup:not(.k2-popup--open) {
	display: none;
}

.k2-popup.animate-in {
	opacity: 0;
	animation: k2-popup-in 0.3s ease-in-out forwards;
}

.k2-popup.animate-out {
	opacity: 1;
	animation: k2-popup-out 0.3s ease-in-out forwards;
}

@keyframes k2-popup-in {
	from {
		opacity: 0;
		transform: translateY(calc(var(--translate-y) - 20px)) translateX(var(--translate-x));
	}

	to {
		opacity: 1;
		transform: translateY(var(--translate-y)) translateX(var(--translate-x));
	}
}

@keyframes k2-popup-out {
	from {
		opacity: 1;
		transform: translateY(var(--translate-y)) translateX(var(--translate-x));
	}
	to {
		opacity: 0;
		transform: translateY(calc(var(--translate-y) - 20px)) translateX(var(--translate-x));
	}
}

.k2-popup--has-content-max-width > * {
	/*noinspection CssUnresolvedCustomProperty*/
	max-width: var(--content-max-width, 100%);
	width: 100%;
}

.k2-popup--prevent-scroll {
	overflow: hidden;
	max-height: 100vh;
	max-width: 100vw;
}