/* Notifications container - Mobile-first */
.notifications-container {
	position: fixed;
	top: 1rem;
	right: 1rem;
	left: 1rem; /* Full width on mobile */
	z-index: 11000;
	display: flex;
	flex-direction: column;
	gap: 10px;

	/* Progressive enhancement for larger screens */
	@media (min-width: 576px) {
		left: auto; /* Reset left on larger screens */
		right: 20px;
		top: 20px;
	}
}

/* Individual notification - Mobile-first */
.notification {
	min-width: 0; /* Allow shrinking on mobile */
	max-width: 100%; /* Full width on mobile */
	width: 100%;
	padding: 12px 16px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: space-between;
	animation: slideIn 0.5s ease forwards;
	opacity: 0;
	transform: translateX(100%);

	/* Progressive enhancement for larger screens */
	@media (min-width: 576px) {
		min-width: 300px;
		max-width: 600px;
		width: auto;
		padding: 15px 20px;
	}

	/* Message text */
	span {
		flex: 1;
		word-wrap: break-word;
		overflow-wrap: break-word;
		white-space: normal;
		margin-right: 10px;
		line-height: 1.4;
	}

	/* Close button */
	.close-btn {
		background: none;
		border: none;
		color: inherit;
		cursor: pointer;
		padding: 0 5px;
		margin-left: 10px;
		opacity: 0.7;
		flex-shrink: 0;

		&:hover {
			opacity: 1;
		}
	}

	/* Fade out animation */
	&.fade-out {
		animation: fadeOut 0.5s ease forwards;
	}

	/* Message types */
	&.success {
		background-color: #d4edda;
		border-color: #c3e6cb;
		color: #155724;
	}

	&.error {
		background-color: #f8d7da;
		border-color: #f5c6cb;
		color: #721c24;
	}

	&.warning {
		background-color: #fff3cd;
		border-color: #ffeeba;
		color: #856404;
	}

	&.info {
		background-color: #cce5ff;
		border-color: #b8daff;
		color: #004085;
	}
}

/* Animations */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(100%);
	}
}