.streak-group {
	position: absolute;
	height: 84px;
}

.streak {
	position: absolute;
	width: 193px;
	height: 84px;
	// opacity: 1 !important;

	$streak_spacing: 113px;

	&:nth-child(2) {
		left: $streak_spacing;
	}

	&:nth-child(3) {
		left: $streak_spacing * 2;
	}

	&:nth-child(4) {
		left: $streak_spacing * 3;
	}

	&:nth-child(5) {
		left: $streak_spacing * 4;
	}

	&:nth-child(6) {
		left: $streak_spacing * 5;
	}

	&:nth-child(7) {
		left: $streak_spacing * 6;
	}

	.circle {
		background-color: $color_purple;
		position: absolute;
		z-index: 2;
		border: 1px solid #6200ea;
		width: 82px;
		height: 82px;
		border-radius: 50%;
		right: 0;
		overflow: hidden;

		.dot {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -21px;
			margin-top: -22px;
			transform: translateX(-200px);
			width: 44px;
			height: 44px;
			background: url('../img/layout/streak-dot.svg') no-repeat left top;
			background-size: contain;
		}
	}

	.tail {
		overflow: hidden;
		position: absolute;
		right: 40px;
		z-index: 1;
		width: 152px;
		height: 82px;
		right: 40px;

		.gradient {
			position: absolute;
			right: 0;
			width: 113px;
			height: 81px;
			transform: translateX(200px);
			background: url('../img/layout/streak-gradient.svg') no-repeat left top;
			background-size: contain;
		}

		.lines {
			position: absolute;
			right: 0;
			width: 152px;
			height: 82px;
			transform: translateX(200px);
			background: url('../img/layout/streak-lines.svg') no-repeat left top;
			background-size: contain;
		}
	}

	.bubbles {
		.dot {
			position: absolute;
			z-index: 9;
			opacity: 0;

			&:nth-child(1) {
				top: 30px;
				left: 140px;
			}

			&:nth-child(2) {
				top: 30px;
				left: 155px;
			}

			&:nth-child(3) {
				top: 30px;
				left: 147px;
			}
		}
	}
}
