.breaking-news-ticker {
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	padding: 0px;
	border: 1px solid #eaeaea;
	border-radius: 4px;
	overflow: hidden;

	.ticker-heading {
		display: flex;
		align-items: center;
		background-color: #d32f2f;
		color: white;
		padding: 12px 20px;
		border-radius: 4px;
		margin-right: 0px;
		font-weight: bold;
		font-size: 0.875rem;
		text-transform: uppercase;
		white-space: nowrap;
		position: relative;

		&:before {
			content: "";
			width: 0;
			height: 0;
			border-top: 10px solid rgba(0, 0, 0, 0);
			border-bottom: 10px solid rgba(0, 0, 0, 0);
			border-left: 10px solid #d32f2f;
			position: absolute;
			right: -14px;
			transform: translate(-50%, -50%);
			top: 50%;
			z-index: 9;
		}
	}

	.ticker-container {
		flex: 1;
		overflow: hidden;
		position: relative;

		&:before, &:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			width: 50px;
			z-index: 2;
		}

		&:before {
			left: 0;
			background: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
		}

		&:after {
			right: 0;
			background: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
		}
	}

	.ticker-content {
		display: flex;
		animation-name: ticker-scroll;
		animation-duration: 15s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;

		&:hover {
			animation-play-state: paused;
		}
	}

	.ticker-item {
		padding: 0 1rem;
		white-space: nowrap;
		position: relative;

		&:before {
			content: "";
			height: 11px;
			width: 11px;
			display: inline-block;
			background-color: #d32f2f;
			border-radius: 100%;
			position: relative;
			margin-right: 10px;
		}

		a {
			color: #333;
			text-decoration: none;
			font-size: 0.9375rem;

			&:hover {
				color: #d32f2f;
				text-decoration: underline;
			}
		}
	}
}

@keyframes ticker-scroll {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(-100%);
	}
}