/* .notice .notice-inner {
	background-color: var(--primary-color);
	padding: 20px;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
}

.notice.notice-type-error .notice-inner {
	background: #ea7f72;
}

@media (max-width: 768px) {
	.notice {
		padding: 0 65px;
	}

	.notice-inner {
		max-width: 380px;
		margin: 0 auto;
		border-radius: 5px;
	}
} */

.toast-group {
	position: fixed;
	z-index: 999999;
	right: 55px;
	bottom: 40px;
	width: 400px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	pointer-events: none;
	font-family: var(--font-family);
}

.toast-group .toast {
	min-width: 300px;
	box-shadow: rgb(34 34 34 / 12%) 0 2px 15px;
	border-radius: 6px;
	padding: 28px;
	background: var(--color-white);
	color: #222;
	white-space: pre-line;
	display: flex;
	gap: 15px;
	align-items: center;
	animation: toast-fade-in 0.4s linear, toast-slide-in 0.4s cubic-bezier(0.3, 1.3, 0.6, 1.3);
	pointer-events: all;

	&.success {
		padding: 10px 15px;
		position: relative;
		border-top: 1px solid var(--color-info-border);
		border-right: 1px solid var(--color-info-border);
		border-bottom: 1px solid var(--color-info-border);
		background: var(--color-info-light);
		border-radius: 6px;

		&:before {
			content: '';
			position: absolute;
			top: -1px;
			bottom: -1px;
			left: 0px;
			border-radius: 6px;
			width: 6px;
			border-left: 6px solid var(--color-info);
			border-right: 6px solid var(--color-info-light);
		}

		.backorder-notice {
			display: flex;
			flex-direction: column;
			gap: 5px;

			h4 {
				font-weight: var(--font-weight-bold);
				margin-bottom: 0px;
				padding-bottom: 0px;
			}

			p {
				color: var(--color-text);
				text-align: left;
			}
		}

	}

	button {
		background: none;
		border: none;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;

		img {
			width: 100%;
			height: auto;
		}
	}
}

.toast-group .toast img {
	width: 23px;
	height: auto;
}

@keyframes toast-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes toast-slide-in {
	from {
		transform: translateX(50%);
	}
}

@media (max-width: 1024px) {
	.toast-group {
		bottom: 80px;
	}
}

@media (max-width: 768px) {
	.toast-group {
		max-width: 100vw;
		/* bottom: 0; */
		right: 0;
		padding: 25px;
	}
}