.announcement-bar {
  color: rgb(var(--color-foreground));
  background: var(--gradient-background);
  background-color: rgb(var(--color-background));
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-top);
}

.announcement-bar-skinny {
  position: relative;
  padding: 10px 16px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
}

.announcement-bar--withBorder {
  border-bottom: 0.1rem solid rgb(var(--color-border));
}

.announcement-slider__slide {
  display: flex;
}

.announcement-slider__slide span:empty {
  display: none;
}

.announcement-link {
  color: rgb(var(--color-foreground));
}

@media screen and (hover: hover) {
  .announcement-link:active,
  .announcement-link:hover {
    color: rgb(var(--color-foreground));
  }
}

.announcement-text {
  display: block;
}

.announcement-text p {
  margin: 0;
}

@media screen and (min-width: 750px) {
  announcement-bar[data-layout="carousel"] .announcement-slider__slide {
    display: none;
  }

  announcement-bar[data-layout="carousel"]
    .announcement-slider__slide:first-child {
    display: flex;
  }

  announcement-bar[data-layout="carousel"] .announcement-text {
    display: inline;
  }

  announcement-bar[data-layout="carousel"]
    .flickity-enabled
    .announcement-slider__slide {
    display: flex;
  }

  announcement-bar:not([data-layout="carousel"]) {
    display: flex;
    justify-content: center;
  }

  announcement-bar:not([data-layout="carousel"]) .announcement__buttons {
    display: none;
  }

  announcement-bar:not([data-layout="carousel"]) .announcement-slider {
    display: flex;
    flex: 1 1 auto;
    column-gap: 5rem;
  }

  announcement-bar:not([data-layout="carousel"]) .announcement-slider__slide {
    white-space: nowrap;
  }

  announcement-bar:not([data-layout="carousel"]).marquee .announcement-slider {
    padding: 0 2.5rem;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: var(--duration);
    animation-play-state: running;
    width: max-content;
  }

  announcement-bar:not([data-layout="carousel"])[data-direction="left"].marquee
    .announcement-slider {
    animation-name: marquee-left;
  }

  announcement-bar:not([data-layout="carousel"])[data-direction="right"].marquee
    .announcement-slider {
    animation-name: marquee-right;
  }

  announcement-bar:not([data-layout="carousel"]).marquee:hover
    .announcement-slider,
  announcement-bar:not([data-layout="carousel"]).marquee--paused
    .announcement-slider {
    animation-play-state: paused;
  }
}

@media screen and (min-width: 990px) {
  announcement-bar:not([data-layout="carousel"]) .announcement-slider {
    column-gap: 7rem;
  }

  announcement-bar:not([data-layout="carousel"]).marquee .announcement-slider {
    padding: 0 3.5rem;
  }
}

@media screen and (max-width: 749px) {
  announcement-bar[data-mobile-layout="carousel"] .announcement-slider__slide {
    display: none;
  }

  announcement-bar[data-mobile-layout="carousel"]
    .announcement-slider__slide:first-child {
    display: flex;
  }

  announcement-bar[data-mobile-layout="carousel"]
    .flickity-enabled
    .announcement-slider__slide {
    display: flex;
  }

  announcement-bar[data-mobile-layout="marquee"] {
    display: flex;
    justify-content: center;
  }

  announcement-bar[data-mobile-layout="marquee"] .announcement__buttons {
    display: none;
  }

  announcement-bar[data-mobile-layout="marquee"] .announcement-slider {
    display: flex;
    flex: 1 1 auto;
    column-gap: 5rem;
    padding: 0 2.5rem;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: var(--duration);
    animation-play-state: running;
    width: max-content;
  }

  announcement-bar[data-mobile-layout="marquee"][data-direction="left"]
    .announcement-slider {
    animation-name: marquee-left;
  }

  announcement-bar[data-mobile-layout="marquee"][data-direction="right"]
    .announcement-slider {
    animation-name: marquee-right;
  }

  announcement-bar[data-mobile-layout="marquee"] .announcement-slider__slide {
    white-space: nowrap;
  }

  announcement-bar[data-mobile-layout="marquee"].marquee--paused
    .announcement-slider {
    animation-play-state: paused;
  }
}

@keyframes marquee-left {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes marquee-right {
  0% {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.announcement__buttons {
  display: flex;
  z-index: 1;
  pointer-events: none;
}

.announcement__button {
  color: rgba(var(--color-foreground), 0.75);
  border: none;
  width: 3.4rem;
  pointer-events: visible;
}

@media screen and (hover: hover) {
  .announcement__button:hover {
    color: rgb(var(--color-foreground));
  }
}

.announcement__button .icon {
  pointer-events: none;
}

.announcement__button--next .icon {
  transform: scaleX(-1);
}

announcement-bar .flickity-enabled:not(:only-child) {
  padding: 0 3.4rem;
}