// >----------------------------------------------------------------<
// >                             IMPORT                             <
// >----------------------------------------------------------------<

// Edit this file for change style
@use "popup__variables" as *;




// >----------------------------------------------------------------<
// >                             CLASS                              <
// >----------------------------------------------------------------<


.popup {
	cursor: auto;
	position: fixed;
	max-width: 80%;
	top: 50%;
	left: 50%;
	z-index: var(--popup--z-index);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--popup--padding__outer);
	border-radius: var(--popup--border-radius);
	background-color: var(--popup--color__bg);
	opacity: 0%;
	transform: translate(-50%, -50%) scale(0.0);
	animation-name: hide-popup;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	transition: transform var(--popup--animation__duration) var(--popup--animation__time-type),
				opacity var(--popup--animation__duration) var(--popup--animation__delay);
	&.show {
		transform: translate(-50%, -50%) scale(1);
		animation-name: show-popup;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
	}

	&__title {
		padding-bottom: 18px;
	}

	&__text {
		padding-bottom: 24px;
		word-wrap: break-word;
		max-width: calc(100% - (var(--popup--padding__inner) * 2));
	}
}




@keyframes show-popup {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes hide-popup {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
}