.da-marquee {
  --da-marquee-duration: 18s;
  --da-repeat-space: 48px;
  --da-icon-spacing: 12px;
  --da-marquee-shift: 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.da-marquee__viewport {
  width: 100%;
  overflow: hidden;
}

.da-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  min-width: max-content;
  will-change: transform;
  animation: da-marquee-left var(--da-marquee-duration) linear infinite;
}

.da-marquee[data-direction="right"] .da-marquee__track {
  animation-name: da-marquee-right;
}

.da-marquee[data-pause-on-hover="yes"]:hover .da-marquee__track {
  animation-play-state: paused;
}

.da-marquee__segment {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-right: var(--da-repeat-space);
}

.da-marquee__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}

.da-marquee__icon--prefix {
  margin-right: var(--da-icon-spacing);
}

.da-marquee__icon--suffix {
  margin-left: var(--da-icon-spacing);
}

.da-marquee__icon i,
.da-marquee__icon svg {
  display: block;
}

.da-marquee__icon svg {
  fill: currentColor;
}

.da-marquee__text {
  display: inline-block;
  white-space: nowrap;
}

@keyframes da-marquee-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--da-marquee-shift)), 0, 0);
  }
}

@keyframes da-marquee-right {
  0% {
    transform: translate3d(calc(-1 * var(--da-marquee-shift)), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}