/*
 * FF Custom Ticker 1.0.0
 * style/style.css
 * 
 * August 1, 2024
 * 
 * CSS layout for FF Custom Ticker
 * 
 */

.ticker > * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ticker img {
  height: 4rem;
}

.ticker {
  background-color: black;
  display: flex;
  overflow: hidden;
  padding: 1rem 2rem;
  user-select: none;
  border-block: 1px solid;
  --gap: 20px;
  gap: var(--gap);
  white-space: nowrap;
  font-family: inherit;
  position: relative;
}

.ticker-items {
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 30s linear infinite;
  justify-content: space-between;
}

.ticker-item {
  /* white-space: nowrap; */
  display: flex;
  width: 28rem;
  text-wrap: wrap;
  gap: 1rem;
  overflow:hidden;
}

.ticker-item p {
  font-weight: bold;
  white-space: wrap;
  width:fit-content;
  word-break: break-word;
  color: white;
}
#second {
  transform: translateX(0%);
  animation-delay: 10s;
}
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
.ticker:hover .ticker-items {
  animation-play-state: paused;
}

.ticker-error-message {
  color: white;
}