/* Shared text notification with an optional native cart shortcut. */
.mrwax-feedback {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline: 1rem;
	z-index: 100;
	box-sizing: border-box;
	inline-size: max-content;
	max-inline-size: min(32rem, calc(100% - 2rem));
	margin-inline: auto;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.65rem;
	padding: 0.35rem 0.4rem 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--mrwax-bronze);
	border-radius: 6px;
	background: var(--wp--preset--color--mrwax-canvas);
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--wp--preset--color--mrwax-ink) 10%, transparent);
	color: var(--wp--preset--color--mrwax-muted);
	font-family: var(--wp--preset--font-family--mrwax-body);
	font-size: 0.875rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
	pointer-events: auto;
}

.mrwax-feedback__message {
	flex: 0 1 auto;
	min-inline-size: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mrwax-feedback__action {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-block-size: 44px;
	white-space: nowrap;
	color: var(--wp--preset--color--mrwax-muted);
	font-weight: 600;
	text-underline-offset: 0.25em;
}

.mrwax-feedback__action:hover { color: var(--wp--preset--color--mrwax-ink); }

.mrwax-feedback__close {
	flex: 0 0 44px;
	inline-size: 44px;
	min-block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.mrwax-feedback__close:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

.mrwax-feedback :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.mrwax-feedback [hidden] { display: none; }

.mrwax-feedback[hidden] {
	display: none;
}

.mrwax-feedback[data-error="true"] {
	border-color: var(--wp--preset--color--mrwax-danger);
}

/* Keep complete validation messages readable while cart confirmations stay compact. */
.mrwax-feedback[data-error="true"] .mrwax-feedback__message {
	white-space: normal;
	overflow: visible;
}

@media (max-width: 25rem) {
	.mrwax-feedback {
		inset-inline: 0.5rem;
		max-inline-size: calc(100% - 1rem);
		gap: 0.4rem;
		padding-inline: 0.65rem 0.25rem;
		font-size: 0.8125rem;
	}
}

@media (forced-colors: active) {
	.mrwax-feedback,
	.mrwax-feedback[data-error="true"] {
		border-color: CanvasText;
		background: Canvas;
		color: CanvasText;
		box-shadow: none;
	}
}