/* /pi-plugin/assets/css/toast.css */

/* Toast Container */
.pi-toast-container {
	position: fixed;
	top: var(--pi-space-lg);
	right: var(--pi-space-lg);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--pi-space-sm);
	pointer-events: none;
}

/* Individual Toast */
.pi-toast {
	background-color: var(--pi-color-panel);
	border: 1px solid var(--pi-nav-border);
	border-radius: 6px;
	padding: var(--pi-space-md) var(--pi-space-lg);
	min-width: 300px;
	max-width: 500px;
	width: fit-content;
	box-shadow: 0 4px 12px var(--pi-color-shadow);
	pointer-events: auto;
	position: relative;
	transform: translateX(100%);
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: flex-start;
	gap: var(--pi-space-sm);
}

/* Toast States */
.pi-toast.show {
	transform: translateX(0);
	opacity: 1;
}

.pi-toast.hide {
	transform: translateX(100%);
	opacity: 0;
}

/* Fade-out animation for entire toast */
.pi-toast.fade-out {
	animation: toastFadeOut ease-out;
}

/* Ensure hide animation takes precedence over fade-out */
.pi-toast.hide.fade-out {
	animation: none;
	opacity: 0;
}

@keyframes toastFadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.7;
	}
}

/* Toast Types */
.pi-toast--success {
	border-left: 4px solid var(--pi-code-green);
}

.pi-toast--error {
	border-left: 4px solid var(--pi-accent-red);
}

.pi-toast--warning {
	border-left: 4px solid var(--pi-code-yellow);
}

.pi-toast--info {
	border-left: 4px solid var(--pi-accent-blue);
}

/* Toast Content */
.pi-toast__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	font-size: 16px;
	line-height: 1;
}

.pi-toast--success .pi-toast__icon {
	color: var(--pi-code-green);
}

.pi-toast--error .pi-toast__icon {
	color: var(--pi-accent-red);
}

.pi-toast--warning .pi-toast__icon {
	color: var(--pi-code-yellow);
}

.pi-toast--info .pi-toast__icon {
	color: var(--pi-accent-blue);
}

.pi-toast__content {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--pi-color-text-bright);
	font-family: var(--pi-font-family);
	font-size: 14px;
	line-height: 1.4;
}

.pi-toast__title {
	font-weight: 600;
	margin: 0 0 var(--pi-space-xs) 0;
	color: var(--pi-color-text-bright);
}

.pi-toast__message {
	margin: 0;
	color: var(--pi-color-text);
}

.pi-toast__actions {
	margin-top: var(--pi-space-sm);
	display: flex;
	gap: var(--pi-space-sm);
}

.pi-toast__action {
	background: none;
	border: none;
	color: var(--pi-accent-blue);
	font-family: var(--pi-font-family);
	font-size: 12px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.pi-toast__action:hover {
	color: var(--pi-color-text-bright);
}

/* Close Button */
.pi-toast__close {
	position: absolute;
	top: var(--pi-space-sm);
	right: var(--pi-space-sm);
	background: none;
	border: none;
	color: var(--pi-color-text);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
}

.pi-toast__close:hover {
	color: var(--pi-color-text-bright);
}

/* Progress Bar */
.pi-toast__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background-color: var(--pi-accent-blue);
	border-radius: 0 0 6px 6px;
	transition: width linear;
}

.pi-toast--success .pi-toast__progress {
	background-color: var(--pi-code-green);
}

.pi-toast--error .pi-toast__progress {
	background-color: var(--pi-accent-red);
}

.pi-toast--warning .pi-toast__progress {
	background-color: var(--pi-code-yellow);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.pi-toast-container {
		top: var(--pi-space-md);
		right: var(--pi-space-md);
		left: var(--pi-space-md);
	}
	
	.pi-toast {
		min-width: auto;
		max-width: none;
		width: 100%;
	}
}

/* Animation for stacking */
.pi-toast-container .pi-toast:nth-child(n+2) {
	transform: translateX(100%) scale(0.95);
}

.pi-toast-container .pi-toast:nth-child(n+2).show {
	transform: translateX(0) scale(0.95);
}

.pi-toast-container .pi-toast:nth-child(n+2).hide {
	transform: translateX(100%) scale(0.95);
}