.si-select {
	&.loading {
		cursor: default;
		pointer-events: none;
		opacity: 0.6;

		.si-select__suffix {
			position: absolute;
			top: calc(50% - 11px);
			right: 7px;
			width: 22px;
			height: 22px;
			border-radius: 50%;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				opacity: 0.2;
				border: 2px solid transparent;
				border-bottom: 2px solid hsl(var(--si-color));
				border-radius: inherit;
				content: '';
				animation: rotateInputLoading 0.8s linear infinite;
			}
			&::after {
				position: absolute;
				top: 0;
				left: 0;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				border: 2px solid transparent;
				border-bottom: 2px solid hsl(var(--si-color));
				border-radius: inherit;
				content: '';
				animation: rotateInputLoading 0.8s ease infinite;
			}
		}
	}
	@keyframes rotateInputLoading {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
}