/*
 * The toast.
 *
 * Three passes got here. The first shipped the template look: a coloured badge
 * in a rounded square, a timer nobody reads, and a lot of air around eleven
 * characters. The second stripped it to a white card with an inline mark and
 * hid the timer, which looked right and quietly broke the thing - this library
 * reads the progress bar's CSS animation as the toast's own clock, so a hidden
 * bar is a toast that never leaves.
 *
 * So the bar is back, and that is the design rather than a concession. A
 * confirmation that disappears on its own should say that it is going to:
 * visibility of system status is the oldest heuristic there is, and here the
 * honest indicator and the working mechanism are the same 2px line. Nothing
 * else on the card moves.
 *
 * The card carries its outcome in its own ground now. A white card with a green
 * tick is a notification that happens to be about success; a card washed in the
 * palest green *is* success, read before the sentence is. One chromatic object
 * per toast, which is what makes it legible at a glance from the corner of an
 * eye (von Restorff), and the sentence stays the thing you actually read.
 *
 * Written as CSS rather than utilities because the markup belongs to toastify:
 * the container takes a className and the toast takes another, but the icon,
 * the body, the bar and the close button are its own.
 */

/*
 * Clear of wp-admin's own bar, which is fixed and 32px tall above 783px. Read
 * from WordPress's own variable rather than from 32, because that is what
 * moves when the bar changes height.
 */
.mhub-toaster {
	top: calc( var( --wp-admin--admin-bar--height, 32px ) + 14px );
	width: auto;
	max-width: 380px;
	padding: 0;
}

/* --------------------------------------------------------------- the card - */

.mhub-toaster .Toastify__toast {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	min-height: 0;
	margin-bottom: 10px;
	padding: 12px 12px 12px 14px;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* A hairline and a short shadow. The old one threw a 28px blur, which on a
	   44px card is more shadow than card. */
	box-shadow:
		inset 0 0 0 1px rgba( 15, 23, 42, 0.07 ),
		0 8px 20px -8px rgba( 15, 23, 42, 0.18 ),
		0 2px 4px -2px rgba( 15, 23, 42, 0.06 );
}

.mhub-toaster .Toastify__toast-body {
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: -0.006em;
	color: #1e293b;
}

/* ------------------------------------------------------------- the tones - */

/*
 * One ground, one hairline, one ink per outcome.
 *
 * The tints are the lightest step of each ramp, so the card still reads as
 * white-ish furniture on a white-ish admin and the colour registers as a state
 * rather than as decoration. Every text pair below is measured on its own
 * ground and clears AA.
 *
 * The hairline is definition, not the boundary: no pastel reaches 3:1 against a
 * near-white page (the deepest of these is 1.8:1), so what separates the card
 * from the admin behind it is the tinted ground and the shadow, and the ring
 * only sharpens an edge that is already there.
 */
.mhub-toaster .Toastify__toast--success {
	/* Inherited by the close button, which has no colour of its own. */
	color: #047857;
	background: #ecfdf5;
	box-shadow:
		inset 0 0 0 1px #6ee7b7,
		0 8px 20px -8px rgba( 5, 103, 74, 0.22 ),
		0 2px 4px -2px rgba( 15, 23, 42, 0.06 );
}

/* #065F46 on #ECFDF5 is 7.29:1, and the mark 5.21:1. */
.mhub-toaster .Toastify__toast--success .Toastify__toast-body {
	color: #065f46;
}

.mhub-toaster .Toastify__toast--error {
	/* Inherited by the close button, which has no colour of its own. */
	color: #b42318;
	background: #fef2f2;
	box-shadow:
		inset 0 0 0 1px #fca5a5,
		0 8px 20px -8px rgba( 180, 35, 24, 0.22 ),
		0 2px 4px -2px rgba( 15, 23, 42, 0.06 );
}

/* #7F1D1D on #FEF2F2 is 9.16:1, and the mark 6.01:1. */
.mhub-toaster .Toastify__toast--error .Toastify__toast-body {
	color: #7f1d1d;
}

.mhub-toaster .Toastify__toast--warning {
	/* Inherited by the close button, which has no colour of its own. */
	color: #b45309;
	background: #fffbeb;
	box-shadow:
		inset 0 0 0 1px #fcd34d,
		0 8px 20px -8px rgba( 180, 83, 9, 0.22 ),
		0 2px 4px -2px rgba( 15, 23, 42, 0.06 );
}

/* #78350F on #FFFBEB is 8.75:1, and the mark 4.84:1. */
.mhub-toaster .Toastify__toast--warning .Toastify__toast-body {
	color: #78350f;
}

.mhub-toaster .Toastify__toast--info {
	/* Inherited by the close button, which has no colour of its own. */
	color: #0a52d0;
	background: #eef4fe;
	box-shadow:
		inset 0 0 0 1px #93c5fd,
		0 8px 20px -8px rgba( 10, 82, 208, 0.22 ),
		0 2px 4px -2px rgba( 15, 23, 42, 0.06 );
}

/* #0A3B8F on #EEF4FE is 9.34:1, and the mark 6.07:1. */
.mhub-toaster .Toastify__toast--info .Toastify__toast-body {
	color: #0a3b8f;
}

/* ---------------------------------------------------------------- the mark - */

/*
 * At text size, inline, with nothing behind it.
 *
 * The card is already tinted, so a tinted disc under the glyph would be the
 * same fact twice. 18px in the tone's darkest step, beside a 13.5px sentence.
 */
.mhub-toaster .Toastify__toast-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	background: none;
}

.mhub-toaster .Toastify__toast-icon svg {
	width: 18px;
	height: 18px;
	fill: none;
}

.mhub-toaster .Toastify__toast--success .Toastify__toast-icon {
	color: #047857;
}

.mhub-toaster .Toastify__toast--error .Toastify__toast-icon {
	color: #b42318;
}

.mhub-toaster .Toastify__toast--warning .Toastify__toast-icon {
	color: #b45309;
}

.mhub-toaster .Toastify__toast--info .Toastify__toast-icon {
	color: #0a52d0;
}

/*
 * The tick draws itself, once, in 260ms.
 *
 * This is the whole delight budget, spent on the one element that carries the
 * outcome - the last thing that happens in a task somebody just finished, which
 * is the beat people remember it by. 260ms because past that a confirmation
 * stops feeling instant.
 */
@keyframes mhub-toast-draw {
	from {
		stroke-dashoffset: 22;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes mhub-toast-mark {
	from {
		opacity: 0;
		transform: scale( 0.7 );
	}

	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

.mhub-toaster .Toastify__toast-icon {
	animation: mhub-toast-mark 180ms cubic-bezier( 0.34, 1.4, 0.64, 1 ) 60ms both;
}

.mhub-toaster .mhub-toast-draw {
	stroke-dasharray: 22;
	animation: mhub-toast-draw 260ms cubic-bezier( 0.65, 0, 0.35, 1 ) 120ms both;
}

/* --------------------------------------------------------------- dismiss - */

/*
 * On screen the whole time, one step back from the sentence.
 *
 * It used to fade in on hover, which is the move that reads as tidy and works
 * as a trap: a control nobody can see is a control nobody knows is there, and
 * on a touch screen there is no hover to reveal it with. An affordance that
 * only exists once you have already guessed at it is not an affordance.
 *
 * So it sits at 80% of the tone's own colour, which measures 3.58:1 on the
 * success card, 4.33 on error, 3.42 on warning and 4.15 on info - all clear of
 * the 3:1 that a UI glyph has to hold - and goes to full strength with a tinted
 * ground under the pointer or the keyboard.
 */
.mhub-toaster .Toastify__close-button {
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0 0 0 2px;
	padding: 0;
	border-radius: 6px;
	background: transparent;
	color: currentColor;
	opacity: 0.8;
	transition: opacity 150ms ease, background-color 150ms ease;
}

/*
 * A 20px glyph with a 40px reach.
 *
 * The drawn button has to stay small - it sits beside a 13.5px sentence on a
 * 44px card, and a real 44px box would be the largest thing on the toast. The
 * pseudo-element gives it the target without giving it the size, which is the
 * usual answer to Fitts on a control that has to look quiet: 40px square,
 * centred on the glyph, invisible, and inside the card's own bounds so it never
 * overlaps the text.
 */
.mhub-toaster .Toastify__close-button {
	position: relative;
}

.mhub-toaster .Toastify__close-button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	transform: translate( -50%, -50% );
}

.mhub-toaster .Toastify__close-button > svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.mhub-toaster .Toastify__toast:hover .Toastify__close-button,
.mhub-toaster .Toastify__toast:focus-within .Toastify__close-button {
	opacity: 1;
}

.mhub-toaster .Toastify__close-button:hover,
.mhub-toaster .Toastify__close-button:focus-visible {
	background: rgba( 15, 23, 42, 0.06 );
	opacity: 1;
}

.mhub-toaster .Toastify__close-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* ----------------------------------------------------------- the clock - */

/*
 * The bar is the timer, in both senses.
 *
 * react-toastify closes a toast when this element's animation ends, so it is
 * not decoration that can be switched off: `display: none` on it, or an
 * `animation: none` inherited from anywhere, is a toast that stays until it is
 * clicked. That is exactly how this component broke once already.
 *
 * Drawn as a 2px rule along the bottom edge, inside the card's radius, in the
 * tone's own colour at a third strength - present if you look for it, invisible
 * if you do not.
 */
.mhub-toaster .Toastify__progress-bar--wrp {
	height: 2px;
	opacity: 1;
	background: transparent;
}

.mhub-toaster .Toastify__progress-bar {
	height: 2px;
	background: currentColor;
	opacity: 0.34;
}

.mhub-toaster .Toastify__toast--success .Toastify__progress-bar {
	color: #047857;
}

.mhub-toaster .Toastify__toast--error .Toastify__progress-bar {
	color: #b42318;
}

.mhub-toaster .Toastify__toast--warning .Toastify__progress-bar {
	color: #b45309;
}

.mhub-toaster .Toastify__toast--info .Toastify__progress-bar {
	color: #0a52d0;
}

/* ---------------------------------------------------------------- motion - */

/*
 * Reduced motion takes the entrance and the drawn tick, and deliberately not
 * the bar: that animation is the clock. Turning it off here would leave a
 * toast on screen forever for exactly the people least able to chase it.
 */
@media ( prefers-reduced-motion: reduce ) {

	.mhub-toaster .Toastify__toast-icon,
	.mhub-toaster .mhub-toast-draw {
		animation: none;
		stroke-dashoffset: 0;
	}

	.mhub-toaster .Toastify__close-button {
		transition: none;
	}
}