/**
 * XtraXtra Toast Notifications
 * Mobile-first, accessible, lightweight
 */

/* Container */
.xtraxtra-toast-container {
	position: fixed;
	top: clamp(3rem, 4vw, 4.5rem);
	left: 0;
	right: 0;
	z-index: 999999;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 1rem);
	padding: 0 var(--wp--preset--spacing--30, 1.5rem) var(--wp--preset--spacing--30, 1.5rem);
}

/* Individual Toast */
.xtraxtra-toast {
	background: var(--wp--preset--color--base, #121212);
	color: var(--wp--preset--color--contrast, #f0f0f0);
	padding: clamp(0.875rem, 2.5vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
	margin: 0;
	border-radius: 0;
	border: 1px solid rgba(240, 244, 248, 0.35);
	border-top: 6px solid transparent;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 0.75rem);
	width: min(92%, 360px);
	max-width: 360px;
	box-sizing: border-box;
	pointer-events: auto;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--merriweather-sans);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.45;
	letter-spacing: 0.005em;
	transform: translateY(-12px);
	opacity: 0;
	transition: transform 0.22s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.22s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* Persistent toasts can't be dismissed by clicking */
.xtraxtra-toast--persistent {
	cursor: default;
}

/* Toast content wrapper */
.xtraxtra-toast__content {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	gap: var(--wp--preset--spacing--10, 0.75rem);
}

/* Visible state */
.xtraxtra-toast--visible {
	transform: translateY(0);
	opacity: 1;
}

/* Message */
.xtraxtra-toast__message {
	word-wrap: break-word;
	overflow-wrap: break-word;
	width: 100%;
	margin: 0;
	font-weight: 500;
	text-align: left;
}

/* Type variations - with dark themed backgrounds */
.xtraxtra-toast--success {
	border-top-color: var(--wp--preset--color--accent-2, #2ecc71);
	background: #0a2e1a; /* Dark green background */
	border-color: rgba(46, 204, 113, 0.2);
}

.xtraxtra-toast--error {
	border-top-color: var(--wp--preset--color--danger, #e74c3c);
	background: #2e0a0a; /* Dark red background */
	border-color: rgba(231, 76, 60, 0.2);
}

.xtraxtra-toast--info {
	border-top-color: var(--wp--preset--color--accent, #3498db);
	background: #0a1a2e; /* Dark blue background */
	border-color: rgba(52, 152, 219, 0.2);
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
	.xtraxtra-toast-container {
		padding: 0 var(--wp--preset--spacing--20, 1rem) var(--wp--preset--spacing--30, 1.5rem);
	}

	.xtraxtra-toast {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		font-size: 1rem;
	}
}

@media (min-width: 600px) {
	.xtraxtra-toast {
		max-width: 420px;
	}
}

/* Button container */
.xtraxtra-toast__buttons {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--10, 0.75rem);
	width: 100%;
}

/* Button styles - full width by default, equal distribution for multiple */
.xtraxtra-toast__button {
	appearance: none;
	background: var(--wp--preset--color--contrast, #ffffff);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--base, #121212);
	padding: 0.75rem 1.25rem;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
	flex: 1; /* Equal width distribution */
	text-align: center;
}

/* Single button - full width */
.xtraxtra-toast__buttons:has(.xtraxtra-toast__button:only-child) {
	width: 100%;
}

.xtraxtra-toast__buttons:has(.xtraxtra-toast__button:only-child) .xtraxtra-toast__button {
	width: 100%;
}

/* Fallback for browsers without :has() support - use class */
.xtraxtra-toast__buttons--single {
	width: 100%;
}

.xtraxtra-toast__buttons--single .xtraxtra-toast__button {
	width: 100%;
}

/* Secondary button style */
.xtraxtra-toast__button--secondary {
	border-color: var(--wp--preset--color--contrast-3, #333333);
	color: var(--wp--preset--color--contrast-2, #a0a0a0);
}

.xtraxtra-toast__button:hover,
.xtraxtra-toast__button:focus-visible {
	color: var(--wp--preset--color--base, #121212);
	background: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.6);
}

.xtraxtra-toast__button--secondary:hover,
.xtraxtra-toast__button--secondary:focus-visible {
	color: var(--wp--preset--color--contrast, #f0f0f0);
	background: var(--wp--preset--color--contrast-3, #333333);
	border-color: var(--wp--preset--color--contrast-3, #333333);
}

.xtraxtra-toast__button:active {
	opacity: 0.75;
}

.xtraxtra-toast__button:focus {
	outline: 2px solid rgba(255, 255, 255, 0.75);
	outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.xtraxtra-toast {
		transition: opacity 0.2s ease;
		transform: none !important;
	}
	
	.xtraxtra-toast__button {
		transition: none;
	}
	
	.xtraxtra-toast__button:hover,
	.xtraxtra-toast__button:active {
		opacity: 1;
	}
}