/**
 * @ownership shared/components
 * @description toast-alert.js가 붙이는 `.toast-message-wrapper` 전용 스타일이다.
 */

@layer component {

@keyframes toastAlertBounceIn {
	0% {
		opacity: 0;
		transform: translate(-50%, -24px) scale(0.92);
	}
	55% {
		opacity: 1;
		transform: translate(-50%, 8px) scale(1.03);
	}
	78% {
		transform: translate(-50%, -4px) scale(0.99);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, 0) scale(1);
	}
}

@keyframes toastAlertBounceOut {
	0% {
		opacity: 1;
		transform: translate(-50%, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -16px) scale(0.96);
	}
}

.toast-message-wrapper {
	position: fixed;
	top: 24px;
	left: 50%;
	z-index: var(--z-feature-modal);

	display: flex;
	justify-content: center;
	align-items: center;

	width: calc(100% - 32px);
	max-width: 18.75rem;

	opacity: 0;
	transform: translate(-50%, -24px) scale(0.92);

	pointer-events: none;
}

.toast-message-wrapper.is-visible {
	opacity: 1;
	animation: toastAlertBounceIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.toast-message-wrapper.is-leaving {
	animation: toastAlertBounceOut 0.24s ease forwards;
}

.toast-message {
	display: inline-flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-strong, var(--border));
	border-radius: var(--pill);

	font-size: 14px;
	line-height: 20px;
	text-align: center;
	word-break: keep-all;

	background: var(--blue-gray-900, #212529);
	box-shadow: var(--shadow-md, 0 12px 24px rgba(15, 23, 42, 0.16));
	color: var(--text-inverse, #ffffff);
}

@media screen and (min-width: 768px) {
	.toast-message-wrapper {
		top: 32px;
	}
}

}