/* ==========================================================================
   PHYZ TOASTS
   ========================================================================== */

:root {
	--phyz-toast-success: #77DE1D;
	--phyz-toast-info: #DADADA;
	--phyz-toast-warning: #F7CD13;
	--phyz-toast-error: #E90B0B;

	--phyz-toast-text: #242020;
	--phyz-toast-background: #FFFFFF;

	--phyz-toast-radius: 16px;
	--phyz-toast-top: 32px;
	--phyz-toast-height: 88px;
	--phyz-toast-icon-width: 80px;
}


/* ==========================================================================
   CONTAINER
   ========================================================================== */

#phyz-toast-container {
	position: fixed;

	top: var(--phyz-toast-top);
	left: 50%;

	transform: translateX(-50%);

	width: calc(100% - 64px);
	max-width: 825px;

	display: flex;
	flex-direction: column;
	gap: 16px;

	z-index: 9999999;

	pointer-events: none;
}


/* ==========================================================================
   TOAST
   ========================================================================== */

.phyz-toast {
	position: relative;

	display: flex;
	align-items: stretch;

	width: 100%;
	min-height: var(--phyz-toast-height);

	background: var(--phyz-toast-background);

	border-radius: var(--phyz-toast-radius);

	overflow: hidden;

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.10),
		0 3px 8px rgba(0, 0, 0, 0.05);

	pointer-events: auto;

	opacity: 0;

	transform: translateY(-150px);

	transition:
		transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 280ms ease;
}


/* Entrée */

.phyz-toast.phyz-toast--visible {
	opacity: 1;
	transform: translateY(0);
}


/* Sortie */

.phyz-toast.phyz-toast--closing {
	opacity: 0;
	transform: translateY(-80px);

	transition:
		transform 280ms ease,
		opacity 220ms ease;
}


/* ==========================================================================
   ICON AREA
   ========================================================================== */

.phyz-toast__icon {
	flex: 0 0 var(--phyz-toast-icon-width);

	width: var(--phyz-toast-icon-width);
	min-height: var(--phyz-toast-height);

	display: flex;
	align-items: center;
	justify-content: center;
}


.phyz-toast__icon svg {
	display: block;

	width: 44px;
	height: 44px;
}


/* ==========================================================================
   COLORS
   ========================================================================== */

.phyz-toast--success .phyz-toast__icon {
	background: var(--phyz-toast-success);
}

.phyz-toast--info .phyz-toast__icon {
	background: var(--phyz-toast-info);
}

.phyz-toast--warning .phyz-toast__icon {
	background: var(--phyz-toast-warning);
}

.phyz-toast--error .phyz-toast__icon {
	background: var(--phyz-toast-error);
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.phyz-toast__content {
	flex: 1;

	display: flex;
	align-items: center;

	min-width: 0;

	padding: 24px 32px 24px 32px;
}


.phyz-toast__message {
	margin: 0;

	font-family: inherit;

	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;

	color: var(--phyz-toast-text);

	overflow-wrap: anywhere;
}


/* ==========================================================================
   CLOSE BUTTON
   ========================================================================== */

.phyz-toast__close {
	position: absolute;

	top: 50%;
	right: 22px;

	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	padding: 0;
	margin: 0;

	border: 0;
	outline: 0;

	background: transparent;

	cursor: pointer;

	-webkit-appearance: none;
	appearance: none;
}


.phyz-toast__close svg {
	display: block;

	width: 24px;
	height: 24px;

	pointer-events: none;
}


.phyz-toast__close:hover {
	opacity: 0.65;
}


.phyz-toast__close:focus-visible {
	outline: 2px solid #242020;
	outline-offset: 2px;

	border-radius: 50%;
}


/* ==========================================================================
   CACHE DES NOTICES WOOCOMMERCE NATIVES
   ========================================================================== */

body.phyz-toasts-ready .woocommerce-message,
body.phyz-toasts-ready .woocommerce-info,
body.phyz-toasts-ready .woocommerce-error,
body.phyz-toasts-ready .woocommerce-warning,

body.phyz-toasts-ready .wc-block-components-notice-banner {
	display: none !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

	:root {
		--phyz-toast-top: 20px;
		--phyz-toast-height: 78px;
		--phyz-toast-icon-width: 78px;
		--phyz-toast-radius: 18px;
	}

	#phyz-toast-container {
		width: calc(100% - 24px);
		max-width: none;

		gap: 10px;
	}

	.phyz-toast__icon svg {
		width: 34px;
		height: 34px;
	}

	.phyz-toast__content {
		padding: 16px 48px 16px 20px;
	}

	.phyz-toast__message {
		font-size: 15px;
		line-height: 1.35;
	}

	.phyz-toast__close {
		right: 10px;

		width: 34px;
		height: 34px;
	}

	.phyz-toast__close svg {
		width: 21px;
		height: 21px;
	}
}