.tdp-ticker {
  --tdp-bg: transparent;
  --tdp-text: #17324d;
  --tdp-label-bg: #17324d;
  --tdp-label-text: #fff;
  --tdp-accent: #26bde2;
  --tdp-border: #dbe7ef;
  --tdp-height: 44px;
  --tdp-font-size: 14px;
  --tdp-font-weight: 500;
  --tdp-label-weight: 700;
  --tdp-label-width: 92px;
  --tdp-label-icon-size: 24px;
  --tdp-item-icon-size: 22px;
  --tdp-gap: 28px;
  --tdp-radius: 0px;
  --tdp-max-width: none;
  --tdp-shadow: none;
  --tdp-duration: 30s;
  --tdp-distance: 1000px;
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: var(--tdp-max-width);
  min-height: var(--tdp-height);
  margin-inline: auto;
  overflow: hidden;
  color: var(--tdp-text);
  background: var(--tdp-bg);
  border-block: 1px solid var(--tdp-border);
  border-radius: var(--tdp-radius);
  box-shadow: var(--tdp-shadow);
  font-family: inherit;
  font-size: var(--tdp-font-size);
  font-weight: var(--tdp-font-weight);
  line-height: 1.25;
  box-sizing: border-box;
  isolation: isolate;
}

.tdp-ticker *,
.tdp-ticker *::before,
.tdp-ticker *::after { box-sizing: border-box; }

.tdp-ticker__inner {
  display: grid;
  grid-template-columns: var(--tdp-label-width) minmax(0, 1fr) auto;
  min-height: calc(var(--tdp-height) - 2px);
  align-items: stretch;
}

.tdp-ticker__label {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tdp-label-width);
  padding: 0 16px 0 19px;
  overflow: hidden;
  color: var(--tdp-label-text) !important;
  background: var(--tdp-label-bg);
  font: inherit;
  font-weight: var(--tdp-label-weight);
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  gap: 9px;
}

.tdp-ticker__label--icon { padding-inline: 10px; }
.tdp-ticker__label-icon {
  display: block;
  width: var(--tdp-label-icon-size);
  height: var(--tdp-label-icon-size);
  max-width: 100%;
  flex: 0 0 auto;
  object-fit: contain;
}
.tdp-ticker__label-text { overflow: hidden; text-overflow: ellipsis; }
.tdp-ticker__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tdp-ticker__label-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tdp-accent);
}

.tdp-ticker__viewport {
  min-width: 0;
  overflow: hidden;
  outline: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.tdp-ticker__viewport:focus-visible {
  outline: 2px solid var(--tdp-accent);
  outline-offset: -3px;
}

.tdp-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  min-height: 100%;
  will-change: transform;
  animation: tdp-ticker-left var(--tdp-duration) linear infinite;
}

.tdp-ticker[data-direction="right"] .tdp-ticker__track {
  animation-name: tdp-ticker-right;
}

.tdp-ticker__group {
  display: flex;
  flex: none;
  align-items: center;
  min-height: calc(var(--tdp-height) - 2px);
  white-space: nowrap;
}

.tdp-ticker__item {
  flex: none;
  padding-inline: var(--tdp-gap);
}

.tdp-ticker__item a,
.tdp-ticker__item span {
  color: var(--tdp-text) !important;
  text-decoration: none;
}

.tdp-ticker__item-content {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: var(--tdp-item-icon-size);
}

.tdp-ticker__item-icon {
  display: block;
  width: var(--tdp-item-icon-size);
  height: var(--tdp-item-icon-size);
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 4px;
}

.tdp-ticker__item-text { display: inline-block; }

.tdp-ticker__item a {
  position: relative;
}

.tdp-ticker__item a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.tdp-ticker__item a:hover::after,
.tdp-ticker__item a:focus-visible::after { transform: scaleX(1); }

.tdp-ticker__separator {
  flex: none;
  color: var(--tdp-accent);
  font-size: .68em;
  line-height: 1;
}

.tdp-ticker__pause {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--tdp-height);
  min-width: var(--tdp-height);
  padding: 0;
  border: 0;
  border-left: 1px solid var(--tdp-border);
  color: var(--tdp-text);
  background: var(--tdp-bg);
  cursor: pointer;
}

.tdp-ticker__pause:hover { background: color-mix(in srgb, transparent 88%, var(--tdp-accent)); }
.tdp-ticker__pause:focus-visible { outline: 2px solid var(--tdp-accent); outline-offset: -3px; }
.tdp-ticker__pause-icon { width: 18px; height: 18px; fill: currentColor; }
.tdp-ticker__play-triangle { display: none; }
.tdp-ticker.is-user-paused .tdp-ticker__pause-bars { display: none; }
.tdp-ticker.is-user-paused .tdp-ticker__play-triangle { display: block; }

.tdp-ticker--pause-hover:hover .tdp-ticker__track,
.tdp-ticker--pause-focus:focus-within .tdp-ticker__track,
.tdp-ticker.is-user-paused .tdp-ticker__track,
.tdp-ticker.is-visibility-paused .tdp-ticker__track {
  animation-play-state: paused;
}

.tdp-ticker.is-reduced-motion .tdp-ticker__viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
.tdp-ticker.is-reduced-motion .tdp-ticker__track { animation: none !important; transform: none !important; }
.tdp-ticker.is-reduced-motion .tdp-ticker__group[aria-hidden="true"] { display: none; }

@keyframes tdp-ticker-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--tdp-distance)), 0, 0); }
}

@keyframes tdp-ticker-right {
  from { transform: translate3d(calc(-1 * var(--tdp-distance)), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 720px) {
  .tdp-ticker {
    --tdp-font-size: min(var(--tdp-font-size), 13px);
    --tdp-label-width: min(var(--tdp-label-width), 78px);
    --tdp-gap: min(var(--tdp-gap), 20px);
  }
  .tdp-ticker__label { padding-inline: 12px; }
  .tdp-ticker__viewport { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .tdp-ticker[data-reduce-motion="1"] .tdp-ticker__viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .tdp-ticker[data-reduce-motion="1"] .tdp-ticker__track { animation: none !important; transform: none !important; }
  .tdp-ticker[data-reduce-motion="1"] .tdp-ticker__group[aria-hidden="true"] { display: none; }
}
