.supt-scroll-item {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	z-index: 2;

	pointer-events: none;

	&__text {
		@extend %t-body-xs;
		color: $color-white;
		text-align: center;
		margin-bottom: 18px;
	}

	&__inner {
		position: relative;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid $color-main;
		background: radial-gradient(50% 50% at 50% 50%, $color-dark 0%, $color-black-background 100%);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 1px solid rgba(237, 0, 47, 0.3);
			animation: pulse 2s infinite;
		}
	}

	&__icon {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: $color-main;
		box-shadow: 0px 0px 8px $color-main;
	}

	&__line {
		margin-top: -16px;
	}
}

@keyframes pulse {
	0%,
	10% {
		opacity: 1;
		transform: scale(1);
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: scale(1.625);
		opacity: 0;
	}
}