:root {
  --cst-default-gap: 80px;
}

.csticker {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: var(--cst-height, 48px);
  min-height: var(--cst-height, 48px);
  color: var(--cst-text, #fff);
  background: var(--cst-bg, #233b70);
  border: var(--cst-border-width, 0px) solid var(--cst-border, #fff);
  border-radius: var(--cst-radius, 0px);
  font-family: var(--cst-font-family, system-ui, sans-serif);
  font-size: var(--cst-font-size, 22px);
  font-weight: var(--cst-font-weight, 600);
  font-style: var(--cst-font-style, normal);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.csticker--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.csticker__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-inline: var(--cst-padding, 20px);
  box-sizing: border-box;
}

.csticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  flex: 0 0 auto;
  gap: 0;
  will-change: transform;
  animation-name: csticker-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 30s;
}

.csticker__group {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  gap: 0;
}

.csticker__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.csticker__separator {
  display: inline-block;
  margin-inline: 22px;
  opacity: 0.9;
}

.csticker__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.csticker__link:hover,
.csticker__link:focus-visible {
  opacity: 0.85;
}

.csticker__pause {
  position: absolute;
  z-index: 2;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid currentColor;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  padding: 5px 9px;
  font: inherit;
  font-size: 0.7em;
  line-height: 1;
  cursor: pointer;
}

.csticker__pause:hover,
.csticker__pause:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.csticker__pause-text {
  margin-inline-start: 4px;
}

.csticker.is-paused .csticker__track {
  animation-play-state: paused;
}

.csticker--pause-hover .csticker__viewport:hover .csticker__track {
  animation-play-state: paused;
}

@keyframes csticker-scroll {
  from {
    transform: translateX(var(--cst-start, 100vw));
  }
  to {
    transform: translateX(calc(-1 * var(--cst-distance, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .csticker__track {
    animation-play-state: paused !important;
  }

  .csticker__pause {
    display: none;
  }
}

@media (max-width: 600px) {
  .csticker {
    font-size: max(16px, calc(var(--cst-font-size, 22px) * 0.82));
  }

  .csticker__pause-text {
    display: none;
  }

  .csticker__separator {
    margin-inline: 14px;
  }
}