<script setup>
  import TsGraff from '../assets/icons/tsG.svg'
  import TsNeon from '../assets/icons/tsN.svg'
  import AfaGraff from '../assets/icons/afaG.svg'
  import AfaNeon from '../assets/icons/afaN.svg'
  import LoveGraff from '../assets/icons/loveG.svg'
  import LoveNeon from '../assets/icons/loveN.svg'
</script>

<template>
    <Teleport to="#playerContainer" defer>
      <div class="graffContainer" id="TsContainer">
        <TsGraff name="graffTs" class="graff" id="graffTs"/>
        <TsNeon name="neonTs" class="neon" id="neonTs"/>
      </div>
    </Teleport>
    <Teleport to="#inboxContainer" defer>
      <div class="graffContainer" id="AfaContainer">
        <AfaGraff name="graffAfa" class="graff" id="graffAfa"/>
        <AfaNeon name="neonAfa" class="neon" id="neonAfa"/>
      </div>
      <div class="graffContainer" id="LoveContainer">
        <LoveGraff name="graffLove" class="graff" id="graffLove"/>
        <LoveNeon name="neonLove" class="neon" id="neonLove"/>
      </div>
    </Teleport>
</template>

<style scoped>
  /*================= Mise en page:
    => Mobile First : par défaut, moins de 500px
    => Tablette et PC format haut : de 500 à 1000px
    => PC large : à partir de 1000px
  */

  /*+++++++++++++++++ COPYBOX
      ================ PC HAUT/IPAD
      @media(min-width:650px){}
      ================ PC LARGE
      @media(min-width:1300px){}
  */
  .graffContainer{
    position: absolute;
    background-color: transparent;
    width:auto;
    height: auto;
  }

  .graff{
    fill: currentColor;
    position: absolute;
    color: var(--main-color);
    z-index: 1;
  }
  .neon{
    fill: currentColor;
    position: absolute;
    animation: none;
    color: var(--neon-color);
    mix-blend-mode: exclusion;
    transition: 3.33s ease;
    z-index: 2;
  }

  #TsContainer{
    top: 66px;
    left: 131.2px;
  }
  #graffTs{
    width: 77px;
    height: auto;
  }
  #neonTs{
    width: 77px;
    height: auto;
    margin-left: -7.77px;
    margin-top: -3.33px;
  }

  #AfaContainer{
    top: -33px;
    left: 266px;
  }
  #graffAfa{
    width: 131.2px;
    height: auto;
  }
  #neonAfa{
    width: 131.2px;
    height: auto;
    margin-left: -7.77px;
    margin-top: -7.77px;
  }

  #LoveContainer{
    top: 250px;
    left: 33px;
  }
  #graffLove{
    width: 250px;
    height: auto;
  }
  #neonLove{
    width: 250px;
    height: auto;
    margin-left: -7.77px;
    margin-top: -7.77px;
  }

  /*================ PC LARGE*/
  @media(min-width:1300px){
    #TsContainer{
      top: 55px;
      left: 300px;
    }
    #graffTs{
      width: 100px;
      height: auto;
    }
    #neonTs{
      width: 100px;
      height: auto;
      margin-left: -7.77px;
      margin-top: -3.33px;
    }

    #AfaContainer{
      top: -16.1%;
      left: unset;
      right: 200px;
    }
    #graffAfa{
      width: 161px;
      height: auto;
    }
    #neonAfa{
      width: 161px;
      height: auto;
      margin-left: -7.77px;
      margin-top: -7.77px;
    }

    #LoveContainer{
      top: 90%;
      left: unset;
      right: 444px;
    }
    #graffLove{
      width: 300px;
      height: auto;
    }
    #neonLove{
      width: 300px;
      height: auto;
      margin-left: -7.77px;
      margin-top: -7.77px;
    }

  }
</style>

<script>
  export default{
    name: 'GraffOverlay',
    mounted(){
      console.log('Graff overlay is loaded!');
    }
  }
</script>
