/*
 * Volta Announcement Bar
 * Quick customize:
 * - Height: change --vab-height
 * - Colors: background/text are injected from admin using CSS vars
 * - Speed: --vab-marquee-duration
 */

:root {
  --vab-height: 36px;
  --vab-bg: #111111;
  --vab-color: #ffffff;
  --vab-marquee-duration: 16s;
  --vab-header-offset: 0px;
}

.vab-announcement-bar {
  width: 100%;
  min-height: var(--vab-height);
  background: var(--vab-bg);
  color: var(--vab-color);
  font-family: "Avenir Next", "avenirnext", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  z-index: 9;
}

.vab-announcement-bar.is-sticky {
  position: fixed;
  top: var(--vab-header-offset);
  left: 0;
}

.vab-announcement-bar__inner {
  height: var(--vab-height);
  display: flex;
  align-items: center;
}

.vab-announcement-bar__viewport {
  width: 100%;
  overflow: hidden;
}

.vab-announcement-bar__track {
  width: max-content;
  display: inline-flex;
  align-items: center;
}

.vab-announcement-bar__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 24px;
  box-sizing: border-box;
}

.vab-announcement-bar__content a {
  color: inherit;
  text-decoration: underline;
}

.vab-announcement-bar__content p {
  margin: 0;
}

.vab-announcement-bar__content--clone {
  display: none;
}

.vab-announcement-bar.is-marquee .vab-announcement-bar__content,
.vab-announcement-bar.is-mobile-overflow .vab-announcement-bar__content {
  width: auto;
  padding-right: 48px;
}

.vab-announcement-bar.is-marquee .vab-announcement-bar__content--clone,
.vab-announcement-bar.is-mobile-overflow .vab-announcement-bar__content--clone {
  display: inline-flex;
}

.vab-announcement-bar.is-marquee .vab-announcement-bar__track,
.vab-announcement-bar.is-mobile-overflow .vab-announcement-bar__track {
  animation: vab-marquee var(--vab-marquee-duration) linear infinite;
}

.vab-announcement-bar.is-marquee:hover .vab-announcement-bar__track,
.vab-announcement-bar.is-mobile-overflow:hover .vab-announcement-bar__track {
  animation-play-state: paused;
}

@keyframes vab-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .vab-announcement-bar {
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .vab-announcement-bar__content {
    padding: 0 16px;
  }
}