.si-notification-parent {
	position: fixed;
	z-index: var(--si-zindex-notification);
	display: flex;
	padding: 10px;
	transition: all 25s ease;

	&--top-right {
		top: 0;
		right: 0;
		align-items: flex-end;
		flex-direction: column-reverse;
		justify-content: flex-end;
		.si-notification-enter-from {
			transform: translate(25%);
			clip-path: circle(0% at 80% 35%);
			.si-notification__content {
				transform: translate(10%);
			}
		}
	}
	&--bottom-right {
		right: 0;
		bottom: 0;
		align-items: flex-end;
		flex-direction: column;
		justify-content: flex-end;

		.si-notification-enter-from {
			transform: translate(25%);
			clip-path: circle(0% at 80% 35%);
			.si-notification__content {
				transform: translate(10%);
			}
		}
	}
	&--bottom-left {
		left: 0;
		bottom: 0;
		align-items: flex-end;
		flex-direction: column;
		justify-content: flex-end;

		.si-notification-enter-from {
			transform: translate(-25%);
			clip-path: circle(0% at 20% 35%);
			.si-notification__content {
				transform: translate(-10%);
			}
		}
		.si-notification-leave-to {
			clip-path: circle(0% at 20% 35%);
		}
	}
	&--top-left {
		top: 0;
		left: 0;
		align-items: flex-start;
		flex-direction: column-reverse;
		justify-content: flex-end;
		.si-notification-enter-from {
			transform: translate(-25%);
			clip-path: circle(0% at 20% 35%);
			.si-notification__content {
				transform: translate(-10%);
			}
		}
		.si-notification-leave-to {
			clip-path: circle(0% at 20% 35%);
		}
	}
	&--top-center {
		top: 0;
		right: auto;
		bottom: auto;
		left: 50%;
		align-items: flex-end;
		flex-direction: column-reverse;
		justify-content: flex-end;
		transform: translate(-50%);
		.si-notification {
			transition: all 0.25s ease, transform 0.3s ease, clip-path 0.5s ease 0.1s;
			clip-path: circle(120% at 50% 0%);
		}
		.si-notification-enter-from {
			transform: translate(0, -25%);
			clip-path: circle(0% at 50% 0%);
			.si-notification__content {
				transform: translate(0, -10%);
			}
		}
	}
	&--bottom-center {
		bottom: 0;
		left: 50%;
		align-items: flex-end;
		flex-direction: column;
		justify-content: flex-end;
		transform: translate(-50%);

		.si-notification {
			transition: all 0.25s ease, transform 0.3s ease, max-height 0.25s ease, clip-path 0.5s ease 0.1s;

			clip-path: circle(120% at 50% 100%);
		}
		.si-notification-enter-from {
			transform: translate(0, 25%);

			clip-path: circle(0% at 50% 100%);
			.si-notification__content {
				transform: translate(0, 10%);
			}
		}
	}
}