.stock-ticker {
  --gap: 20px;
  border-block: 1px solid;
  display: flex;
  font-size: 15px;
  gap: var(--gap);
  overflow: hidden;
  padding-block: 8px;
  user-select: none;
}

.stock-ticker ul {
  align-items: center;
  animation: scroll 20s linear infinite;
  display: flex;
  flex-shrink: 0;
  gap: var(--gap);
  justify-content: space-between;
  list-style: none;
  min-width: 100%;
}

.stock-ticker:hover ul {
  animation-play-state: paused;
}

.stock-ticker ul:first-child {
}

.stock-ticker ul:last-child {
}

.stock-ticker .company,
.stock-ticker .price {
  font-weight: bold;
}

.stock-ticker .price {
  margin-inline: 4px;
}

.stock-ticker .plus::before {
  content: "↑";
}

.stock-ticker .minus::before {
  content: "↓";
}

.stock-ticker .plus .change,
.stock-ticker .plus::before {
  color: #089981;
}

.stock-ticker .minus .change,
.stock-ticker .minus::before {
  color: #f23645;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}