<script setup lang="ts">

</script>

<template>
  <div class="carousel overflow-hidden w-full relative">
    <div class="flex w-max animate-scroll">
      <div
        v-for="i in 2"
        :key="i"
        class="flex"
      >
        <slot />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll {
  animation: scroll 25s linear infinite;
}

.carousel:before,
.carousel:after {
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  content: "";
  z-index: 2;
}

.carousel:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.carousel:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.dark .carousel:before {
  background: linear-gradient(to left, rgba(38, 40, 43, 0), #161617);
}

.dark .carousel:after {
  background: linear-gradient(to right, rgba(38, 40, 43, 0), #161617);
}
</style>
