/** @format */

.woocommerce-transient-notices {
	position: fixed;
	bottom: $gap-small;
	left: 0;
	z-index: 99999;
}

.woocommerce-transient-notice {
	transform: translateX(calc(-100% - #{$gap}));
	transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	max-height: 300px; // Used to animate sliding down when multiple notices exist on exit.

	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}

	&.slide-enter-active,
	&.slide-enter-done {
		transform: translateX(0%);
	}

	&.slide-exit-active {
		transform: translateX(calc(-100% - #{$gap}));
	}

	&.slide-exit-done {
		max-height: 0;
		margin: 0;
		padding: 0;
		visibility: hidden;
	}

	.components-notice {
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	}
}