/* ------------------------------------------------------------- 30/05/2024 - *
   .b-marquee                         codepen.io/hexagoncircle/full/eYMrGwW
 * -------------------------------------------------------------------------- */
.b-marquee {
  --marquee-speed: 30s;
  --marquee-height: 40px;
  --marquee-gap: 1rem;

  position: relative;
  overflow: hidden;
  display: flex;
  gap: var(--marquee-gap);
  user-select: none;
  height: var(--marquee-height);
  line-height: var(--marquee-height);
//max-width: fit-content;

  ul {
    display: flex;
    gap: var(--marquee-gap);
    flex-shrink: 0;
    justify-content: space-around;
    min-width: 100%;
    margin: 0;
  //padding: 0;
    animation: ani-scroll var(--marquee-speed) linear infinite;

    > li {
      display: inline-block;
      white-space: nowrap;

      &:after { 
        content: ' ### ';
        margin: 0 var(--marquee-gap);
      } /* after */
    } /* li */
  } /* ul */

  /* otional */
  &:hover ul { animation-play-state: paused; } // Stop onHover
  &.-reverse ul { animation-direction: reverse; }
  &.-absolute ul:last-child { position: absolute; top: 0; left: 0; }
  &.-absolute ul:last-child { animation-name: ani-scroll-abs; }

  @keyframes ani-scroll {
    from { transform: translateX(0); }
      to { transform: translateX(calc(-100% - var(--marquee-gap))); }
  }
  
  @keyframes ani-scroll-abs {
    from { transform: translateX(calc(100% + var(--marquee-gap))); }
      to { transform: translateX(0); }
  }
} /* b-marquee */