<script lang='ts'>

  export let sliderList;


</script>
  

  <div class="slider pt-1 sm:pt-0 h-10 sm:h-8 w-full max-w-screen">
    <div class="slide-track flex flex-row items-center">
      {#each [...sliderList] as item}
        <a href="{`stocks/${item?.symbol}`}" class="cursor-pointer transition shadow-lg sm:hover:bg-[#404040] sm:hover:bg-opacity-[0.7] duration-150 sm:w-full flex flex-row items-center rounded-full justify-center py-1.5 text-white text-sm mr-6 sm:mr-8">
          {item.symbol}
          {#if item?.changesPercentage >= 0}
              <svg class="inline-block w-4 h-4 ml-0.5 -mr-0.5 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
              <span class="text-[#10DB06] text-sm font-medium">+{item?.changesPercentage?.toFixed(2)}%</span>
          {:else if item?.changesPercentage < 0}
              <svg class="inline-block w-4 h-4 ml-0.5 -mr-0.5 mt-1 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
              <span class="text-[#FF2F1F] text-sm font-medium">{item?.changesPercentage?.toFixed(2)}%</span>
          {/if}

        </a>
      {/each}
    </div>
  </div>




<style lang='scss'>

@mixin white-gradient {
  background: linear-gradient(to right, rgba(14, 14, 16, 1) 0%, rgba(14, 14, 16, 0) 100%);
}

$animationSpeed: 60s;

// Animation
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

// Styling
.slider {
  background: #09090B;
  margin: auto;
  overflow: hidden;
  position: relative;

  &::before,
  &::after {
    @include white-gradient;
    content: "";
    height: 100%;
    position: absolute;
    width: 3%;
    z-index: 2;
  }

  &::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
  }

  &::before {
    left: 0;
    top: 0;
  }

  .slide-track {
    animation: scroll $animationSpeed linear infinite;
    display: flex;
    width: calc(250px * 14);
    &:hover {
    animation-play-state: paused;
  }
  }

  
}
  </style>
  