@import '../../../styles/_partials/index';

:global {
	.Toastify__toast-container {
		--toastify-toast-width: 400px;
	}

	.Toastify__toast {
		padding: 20px;
		font-family: unset;
		@include theme-background-white-else-graydark50;
		box-shadow: 0px 0px 11px rgb(0 0 0 / 10%);

		&.Theme__Inverted {
			@include theme-background-graydark-else-white;
		}
	}

	.Toastify__toast-body {
		padding: 0;
		margin: 0;
		@include theme-color-graydark-else-white;
	}
}

.Toast__content {
	--Toast_Progress_Color: #{$green};
	display: flex;
	align-items: center;
}

.Toast__content_Error {
	--Toast_Progress_Color: #{$orange};
}

.Toast__ProgressRing_Wrapper {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.Toast_ProgressRing_Icon {
	position: absolute;
	display: inline;

	path,
	rect,
	circle,
	* {
		fill: var(--Toast_Progress_Color);
	}
}

.Toast__ProgressRing {
	svg:last-of-type circle {
		transition: stroke-dashoffset 100ms ease-in-out;
		stroke: var(--Toast_Progress_Color);
	}

	svg circle {
		stroke-width: 2px;
	}

	span {
		margin: 0;
		fill: var(--Toast_Progress_Color);
	}
}

.Toast__Close {
	margin-left: 20px;
}

@keyframes SlideInRight {
	from {
		transform: translate3d(110%, 0, 0);
		opacity: 0;
	  }

	50% {
		opacity: 0;
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes SlideOutRight {
	from {
		transform: translate3d(0, 0, 0);
		opacity: 1
	  }

	40% {
		opacity: 0;
	}

	to {
		opacity: 0;
		transform: translate3d(110%, 0, 0);
	}
}

.Toast__slide-enter, .Toast__slide-exit {
	animation-fill-mode: both;
	animation-duration: 0.4s;
	animation-timing-function: ease-in-out;
}

.Toast__slide-enter {
	animation-name: SlideInRight;
}

.Toast__slide-exit {
	animation-name: SlideOutRight;
}

:global(.__NoMotion) .Toast__slide-exit {
	display: none;
}