/* Container & Base Layout */
.scrolling-banner {
  position: relative;
  overflow: hidden;
}

.scrolling-banner .banner {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
}

.scrolling-banner .banner-item {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding-left: var(--scrolling-banner-gutter-mobile);
  padding-right: var(--scrolling-banner-gutter-mobile);
}

.scrolling-banner .banner .text-content,
.scrolling-banner .banner-item .text-content {
  margin: 0;
}

/* Responsiveness for Items */
@media (min-width: 810px) {
  .scrolling-banner .banner-item {
    padding-left: var(--scrolling-banner-gutter-desktop);
    padding-right: var(--scrolling-banner-gutter-desktop);
  }
}

/* Fade Overlays — Desktop Default */
.scrolling-banner .show-fade:before,
.scrolling-banner .show-fade:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  width: 30%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}

.scrolling-banner .show-fade:before {
  left: 0;
  background: linear-gradient(
    90deg,
    var(--color-scheme-background-color) 15%,
    rgba(255, 255, 255, 0) 85%
  );
}

.scrolling-banner .show-fade:after {
  right: 0;
  background: linear-gradient(
    270deg,
    var(--color-scheme-background-color) 15%,
    rgba(255, 255, 255, 0) 85%
  );
}

/* Fade Overlays — Mobile Refinement */
@media (max-width: 809px) {
  .scrolling-banner .show-fade:before,
  .scrolling-banner .show-fade:after {
    width: 14%;
  }

  .scrolling-banner .show-fade:before {
    background: linear-gradient(
      90deg,
      var(--color-scheme-background-color) 30%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .scrolling-banner .show-fade:after {
    background: linear-gradient(
      270deg,
      var(--color-scheme-background-color) 30%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

/* Dividers & Icons */
.scrolling-banner .divider {
  display: block;
  height: 100%;
  border-right: 1px solid var(--color-scheme-border-color);
  margin: 0 var(--scrolling-banner-gutter-mobile);
}

@media (min-width: 810px) {
  .scrolling-banner .divider {
    margin: 0 var(--scrolling-banner-gutter-desktop);
  }
}

.scrolling-banner .icon--placeholder {
  max-width: unset;
  width: auto;
}

.scrolling-banner .content-image {
  width: auto;
}

/* Custom Element Styles */
scrolling-banner {
  rotate: var(--scrolling-banner-rotate);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion) {
  scrolling-banner {
    display: flex;
    overflow: hidden;
  }

  scrolling-banner .banner[data-duplicated] {
    display: none;
  }

  .scrolling-banner .banner {
    flex-wrap: wrap;
    align-items: normal;
  }

  .scrolling-banner .banner-item {
    align-items: center;
  }

  .scrolling-banner .divider {
    display: flex;
    height: unset;
  }
}

/* Animation Logic */
@media (prefers-reduced-motion: no-preference) {
  scrolling-banner {
    display: grid;
    grid: auto / auto-flow max-content;
    transition: transform 0.6s ease-out;
  }

  scrolling-banner.animation-direction-normal {
    justify-content: start;
  }

  scrolling-banner.animation-direction-normal .banner {
    animation-name: translateLeft;
  }

  scrolling-banner.animation-direction-reverse {
    justify-content: end;
  }

  scrolling-banner.animation-direction-reverse .banner {
    animation-name: translateRight;
  }

  scrolling-banner .banner {
    animation-duration: var(--scrolling-banner-animation-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  scrolling-banner:hover .banner {
    animation-play-state: paused;
  }
}

/* Keyframes */
@keyframes translateLeft {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-100%);
  }
}

@keyframes translateRight {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(100%);
  }
}