@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

[data-infinity-scroll] {
  

  &::before{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: $margin-medium 0;
    @include type(label-04);
  }
    
  

  &[data-infinity-scroll--loading]::before {
    position: relative;
    left: -20%;
    content: "";
    display: block;
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(
      circle 0px at 0px 0px,
      lightgray 99%,
      transparent 0
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0) 80%
    ),
   
    linear-gradient(var(--background-color-muted-alpha) 20px, transparent 0),
    linear-gradient(var(--background-color-muted-alpha) 20px, transparent 0),
    linear-gradient(var(--background-color-muted-alpha) 20px, transparent 0),
    linear-gradient(var(--background-color-muted-alpha) 20px, transparent 0);

    background-repeat: repeat-y;

    background-position: 
      0 0,  
      30% 0,  
      120px 0, 
      120px 40px, 
      120px 80px, 
      120px 120px;

    background-size: 
      0 200px,  
      0 200px, 
      0 200px, 
      0 200px, 
      0 200px, 
      0 200px;

    animation: shine 3s infinite ease-out;
  }
  

  &[data-infinity-scroll--error]::before{
    
    $bg-preload-error: $color-warning-light;
    $color-preload-error: $color-warning-dark;
    content:"Attenzione, articolo non caricato... "; 
    background-color: $bg-preload-error;
    color: $color-preload-error;
    transform-origin: top;
    animation: close-window .3s linear forwards ;
    animation-delay: 4s;
    padding: $padding-medium;
    

  }

  @keyframes shine {
    96% {
      background-size: 
      100px 200px,  
      50px 200px, 
      150px 200px, 
      350px 200px, 
      300px 200px, 
      250px 200px;
      opacity: 1;
    }
    100% {
      background-size: 
      100px 200px,  
      50px 200px, 
      150px 200px, 
      350px 200px, 
      300px 200px, 
      250px 200px;
      opacity: 0;
    }
  }



  @keyframes close-window{ 
    to{
      height: 0px;
      transform: scale(0);
    }
  }

}