.dsw-marquee {
  --dsw-bg: #796756;
  --dsw-outline-color: #ffffff;
  --dsw-fill-color: #ffffff;
  --dsw-separator-color: rgba(255, 255, 255, 0.96);
  --dsw-speed: 30s;
  --dsw-padding-vertical: 16px;
  --dsw-stroke-width: 1.6px;
  --dsw-separator-width: 32px;
  --dsw-separator-height: 12px;
  --dsw-separator-border-width: 2px;
  --dsw-separator-spacing: 10px;
  --dsw-text-transform: uppercase;
  width: 100%;
  overflow: hidden;
  background: var(--dsw-bg);
  padding: var(--dsw-padding-vertical) 0;
  box-sizing: border-box;
}

.dsw-marquee,
.dsw-marquee * {
  box-sizing: border-box;
}

.dsw-marquee__defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

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

.dsw-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: dsw-marquee-move var(--dsw-speed) linear infinite;
  will-change: transform;
}

.dsw-marquee--pause:hover .dsw-marquee__track {
  animation-play-state: paused;
}

.dsw-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.dsw-marquee__item {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0.92;
  white-space: nowrap;
  text-transform: var(--dsw-text-transform);
}

.dsw-marquee__outline,
.dsw-marquee__fill {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  user-select: none;
}

.dsw-marquee__outline {
  color: var(--dsw-outline-color);
  transition: opacity 0.28s ease;
  opacity: 1;
}

.dsw-marquee__flood {
  flood-color: var(--dsw-outline-color);
}

.dsw-marquee__fill {
  position: absolute;
  inset: 0;
  color: var(--dsw-fill-color);
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s ease, -webkit-clip-path 0.45s ease;
  pointer-events: none;
}

.dsw-marquee__item:hover .dsw-marquee__fill {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.dsw-marquee__item:hover .dsw-marquee__outline {
  opacity: 0;
}

.dsw-marquee__separator {
  width: var(--dsw-separator-width);
  height: var(--dsw-separator-height);
  margin: 0 var(--dsw-separator-spacing);
  border: var(--dsw-separator-border-width) solid var(--dsw-separator-color);
  border-radius: 999px;
  flex: 0 0 auto;
}

@keyframes dsw-marquee-move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}