<script setup>
  import CloseIcon from '../assets/icons/close.svg'
</script>

<template>
    <div id="playerContainer">
      <div id="playerCreditStyle">
        <p>Test-333</p>
      </div>
      <button type="button" class="iconBtnStyle">
        <CloseIcon name="test" class="icon"/>
      </button>
      <button type="button" class="iconBtnStyle">
        <CloseIcon name="test" class="icon"/>
      </button>
      <button type="button" class="iconBtnStyle">
        <CloseIcon name="test" class="icon"/>
      </button>
    </div>
</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:500px){}
      ================ PC LARGE
      @media(min-width:1000px){}
  */

  #playerContainer{
    width:100%;
    position:relative;
    height:7.77%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-top: 13.12px;
  }

  #playerContainer .iconBtnStyle{
    width: 33px;
    height: 33px;
    margin-left: 16.1px;
  }

  #playerCreditStyle{
    width: 50%;
    height: 50px;
    background-color: var(--back-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    margin-left: 16.1px;
    padding-left: 16.1px;
    border-radius: 66px;
    border-style: solid;
    border-color: var(--main-color);
    border-width: thin;
    font-family: 'velvelyne';
    font-size: 16.1px;
    font-weight: bold;
  }




  /*================ PC LARGE*/
  @media(min-width:1300px){
    #playerContainer{
      height: 7.77%;
      padding: 16.1px;
    }

    #playerCreditStyle{
      margin-left: 33px;
      width: 33.3%;
    }
  }
</style>

<script>
  export default {
    name : 'MusicPlayer',
    mounted(){
      console.log("Music player is loaded!");
    }
  };
</script>
