/* Shared single-line overflow treatment for dense table cells. */
.app-overflow-marquee {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.app-overflow-marquee.is-overflowing {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 12px), transparent 100%);
}

.app-overflow-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}

.app-overflow-marquee__group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.app-overflow-marquee.is-overflowing .app-overflow-marquee__group::after {
  content: "";
  align-self: center;
  flex: 0 0 1px;
  width: 1px;
  height: 1.05em;
  margin: 0 10px;
  border-left: 1px solid currentColor;
  opacity: 0.48;
}

.app-overflow-marquee:not(.is-overflowing) .app-overflow-marquee__group[data-overflow-marquee-clone] {
  display: none;
}

.app-overflow-marquee.is-overflowing .app-overflow-marquee__track {
  animation: appOverflowMarquee var(--marquee-duration, 16s) linear 1s infinite;
}

.app-overflow-marquee.is-overflowing:hover .app-overflow-marquee__track,
.app-overflow-marquee.is-overflowing:focus .app-overflow-marquee__track {
  animation-play-state: paused;
}

@keyframes appOverflowMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-distance))); }
}

@media (prefers-reduced-motion: reduce) {
  .app-overflow-marquee.is-overflowing {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: thin;
  }

  .app-overflow-marquee.is-overflowing .app-overflow-marquee__track {
    animation: none;
  }

  .app-overflow-marquee .app-overflow-marquee__group[data-overflow-marquee-clone] {
    display: none;
  }
}