.si-notification {
	&.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px !important;
		min-height: 100px !important;
		max-height: 100px !important;
		padding: 0 !important;
		padding-left: 0 !important;

		.si-notification__loading {
			position: absolute;
			width: 50px;
			height: 50px;
			&:after {
				position: absolute;
				top: 0;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				border: 3px solid transparent;
				border-bottom: 3px solid hsl(var(--si-color));
				border-radius: 50%;
				content: '';
				animation: loadingNoti 0.8s ease infinite;
			}
			&:before {
				position: absolute;
				top: 0;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				opacity: 0.2;
				border: 3px solid transparent;
				border-bottom: 3px dashed hsl(var(--si-color));
				border-radius: 50%;
				content: '';
				animation: loadingNoti 0.8s linear infinite;
			}
		}
	}
}

@keyframes loadingNoti {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}