.news-ticker {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--news-ticker-color, #000);
  border: var(--news-ticker-border-width, 3px) solid var(--news-ticker-border-color, #d0d0d0);
  border-radius: var(--news-ticker-radius, 12px);
  background-color: var(--news-ticker-bg, #f0f0f0);
  font-size: var(--news-ticker-font-size, 18px);
}

.news-ticker::before {
  position: absolute;
  z-index: 2;
  display: block;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--news-ticker-icon-width, 56px);
  min-height: calc((var(--news-ticker-padding-y, 8px) * 2) + var(--news-ticker-font-size, 18px));
  content: "";
  background: var(--news-ticker-icon-bg, #d0d0d0) url("../images/news.png") no-repeat center;
  background-size: contain;
}

.news-ticker--without-icon::before {
  display: none;
}

.news-ticker--with-icon {
  padding-inline-start: var(--news-ticker-icon-width, 56px);
}

.news-ticker__content {
  display: flex;
  gap: var(--news-ticker-gap, 24px);
  padding: var(--news-ticker-padding-y, 8px) var(--news-ticker-padding-x, 16px);
  transform: translateX(100%);
  animation: news-ticker-scroll var(--news-ticker-speed, 30s) linear infinite;
  white-space: nowrap;
}

.news-ticker--with-icon .news-ticker__content {
  padding-inline-start: var(--news-ticker-padding-x, 16px);
}

.news-ticker--pause-on-hover .news-ticker__content:hover,
.news-ticker--pause-on-hover .news-ticker__content:focus-within {
  animation-play-state: paused;
}

.news-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.news-ticker__url {
  color: var(--news-ticker-link-color, #b22028);
  font-weight: 700;
}

.news-ticker__description {
  color: var(--news-ticker-color, #000);
}

.news-ticker__item--empty {
  font-style: italic;
}

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

@media (prefers-reduced-motion: reduce) {
  .news-ticker__content {
    flex-wrap: wrap;
    transform: none;
    animation: none;
    white-space: normal;
  }
}