@import url("./variables.css");
@import url("./fonts.css");

/* :root {
  
} */

* {
  box-sizing: border-box;
  font-family: 'inter-var', sans-serif;
  user-select: none;
}


h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h1 {
  color: var(--color--fg-50);
  margin-bottom: 24px;
}

h2 {
  color: var(--color--fg-50);
  margin-bottom: 16px;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  margin: 0;
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius--button);
  /* transition: background-color .2s linear, color .2s linear; */
  font-size: 16px;

  &:hover {
    cursor: pointer;
  }
}

.app-icon {
  width: 150px;
  height: 150px;

  path { fill: black; }
  
  /* SIZES */
  &.icon-xxs { width: 12px; height: 12px; }
  &.icon-xs  { width: 16px; height: 16px; }
  &.icon-s   { width: 24px; height: 24px; }
  &.icon-m   { width: 48px; height: 48px; }
  &.icon-l   { width: 72px; height: 72px; }
  &.icon-xl  { width: 96px; height: 96px; }

  /* COLORS */
  &.icon-fg-0   { path { fill: var(--color--fg-0); } }
  &.icon-fg-10  { path { fill: var(--color--fg-10); } }
  &.icon-fg-20  { path { fill: var(--color--fg-20); } }
  &.icon-fg-30  { path { fill: var(--color--fg-30); } }
  &.icon-fg-40  { path { fill: var(--color--fg-40); } }
  &.icon-fg-50  { path { fill: var(--color--fg-50); } }
  &.icon-fg-60  { path { fill: var(--color--fg-60); } }
  &.icon-fg-70  { path { fill: var(--color--fg-70); } }
  &.icon-fg-80  { path { fill: var(--color--fg-80); } }
  &.icon-fg-90  { path { fill: var(--color--fg-90); } }
  &.icon-fg-100 { path { fill: var(--color--fg-100); } }

  
  &.active { opacity: 1; }
  &.inactive { opacity: .25; }
}

html, body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  min-width: 100svw; width: 100svw; max-width: 100svw;
  min-height: 100svh; height: 100svh; max-height: 100svh;
  background-color: var(--color--bg-0);
  overflow: hidden;

  &::-webkit-scrollbar {
    display: none;
  }

  /* header {
    
  } */

  main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 100%; width: 100%; max-width: 100%;
    min-height: var(--height--main); height: var(--height--main); max-height: var(--height--main);
    background-color: var(--color--bg-0);
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
    margin: 0;

    &::-webkit-scrollbar {
      display: none;
    }

    section {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      min-width: 100%; width: 100%; max-width: 100%;
      min-height: var(--height--main); height: var(--height--main); max-height: var(--height--main);
      background-color: var(--color--bg-15);
      overflow-x: hidden;
      overflow-y: scroll;
      padding: 24px var(--horizontal-padding);
      margin: 0;

      &::-webkit-scrollbar {
        display: none;
      }

      &.discography-section {
        display: none;
        opacity: 0;
        /* background-color: red; */

        .main-logo {
          display: flex;
          min-width: 8.5svh;
          min-height: 8.5svh;
          background-image: url('../medias/images/logo-h3oplus.svg');
          background-position: center;
          background-size: cover;
          margin: 0 auto;
          margin-bottom: 24px;
          filter: invert();
          opacity: 1;

        }

        .logo-text {
          margin: 0 auto;
          transform: scaleX(1.5);
        }
      }

      &.playing-section {
        display: none;
        justify-content: space-between;
        align-items: center;
        opacity: 0;
        /* background-color: green; */

        /* Tablet */
        @media (min-width: 767px) and (max-width: 1279px) { 
          justify-content: space-evenly;
        }
        /* Laptop */
        @media (min-width: 1280px) and (max-width: 1919px) { 
          justify-content: space-evenly;
        }
        /* Desktop */
        @media (min-width: 1920px) { 
          justify-content: space-evenly;
        }

        .cover {
          display: flex;
          width: 100%; max-width: 45svh;
          aspect-ratio: 1/1;
          background-color: cyan;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          border-radius: 12px;

          /* Tablet */
          @media (min-width: 767px) and (max-width: 1279px) { 
            min-width: 30svh;  width: 30svh; max-width: 30svh;
          }
          /* Laptop */
          @media (min-width: 1280px) and (max-width: 1919px) { 
           min-width: 250px;  width: 250px; max-width: 250px;
          }
          /* Desktop */
          @media (min-width: 1920px) { 
            min-width: 250px;  width: 250px; max-width: 250px;
          }
        }

        .song-infos {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 4px;
          width: 100%;
          height: fit-content;
          color: var(--color--fg-0);
  
          & > span:first-child {
            text-transform: uppercase;
            text-align: center;
            font-size: 24px;
            font-weight: 600;
          }
          & > span:last-child {
            font-size: 18px;
            font-weight: 300;
          }
        }

        .controls-container {
          display: flex;
          justify-content: center;
          width: 100%;
          height: fit-content;

          button {
            padding: 0 12px;
          }

          .repeat {
            padding: 0;

            &.inactive { svg { path { fill: var(--color--fg-50); }}}
            &.active-nuwa { svg { path { fill: var(--color--nuwa); }}}
            &.active-qargo { svg { path { fill: var(--color--qargo); }}}
          }

          .is-liked-playing {
            padding: 0;
            &.inactive { svg { path { fill: var(--color--fg-50); }}}
            &.active-nuwa { svg { path { fill: var(--color--nuwa); }}}
            &.active-qargo { svg { path { fill: var(--color--qargo); }}}
          }
        }

        .waveform-container {
          width: 100%;
          height: fit-content;
          margin: 0 0;

          .timer-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-size: 14px;
            margin-bottom: 12px;
          }
        
          #waveform {
            overflow: hidden;
            height: 10svh;

            /* Tablet */
            /* @media (min-width: 767px) and (max-width: 1279px) { 
              
            } */
            /* Laptop */
            @media (min-width: 1280px) and (max-width: 1919px) { 
              &:hover {
                cursor: pointer;
              }
            }
            /* Desktop */
            @media (min-width: 1920px) { 
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
      
      &.likes-section {
        display: none;
        opacity: 0;
        /* background-color: var(--color--bg-60); */
      }

      &.active {
        display: flex;
        opacity: 1;
      }
      &.inactive {
        display: none;
        opacity: 0;
      }
    }
  }

  #playingFooter {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 100%; width: 100%; max-width: 100%;
    min-height: var(--height--playing-footer); height: var(--height--playing-footer); max-height: var(--height--playing-footer);
    background-color: var(--color--bg-10);
    overflow: hidden;

    .main-part {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      height: 95%;

      .cover {
        display: flex;
        height: 100%;
        aspect-ratio: 1/1;
        /* background-color: cyan; */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .song-infos {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        height: 100%;
        background-color: var(--color--bg-0);
        color: var(--color--fg-0);

        & > span:first-child {
          text-transform: uppercase;
          font-weight: 600;
        }
        & > span:last-child {
          font-size: 14px;
          font-weight: 300;
          color: var(--color--fg-30);
        }

        /* Laptop */
        @media (min-width: 1280px) and (max-width: 1919px) { 
          gap: 4px;

          & > span:first-child {
            font-size: 14px;
          }
          & > span:last-child {
            font-size: 12px;
          }
        }
        /* Desktop */
        @media (min-width: 1920px) { 
          gap: 4px;

          & > span:first-child {
            font-size: 14px;
          }
          & > span:last-child {
            font-size: 12px;
          }
        }
      }

      .play-pause-button {
        background-color: var(--color--bg-0);
        height: 100%;
        padding: 0 var(--horizontal-padding);
      }
    }
      
    .progress-bar-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 5%;
      background-color: var(--color--bg-15);

      .progress-bar {
        display: flex;
        width: 0%;
        height: 100%;
        background-color: magenta;

        &.nuwa {
          background-color: var(--color--nuwa);
        }
        &.qargo {
          background-color: var(--color--qargo);
        }
      }
    }
  }

  footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    min-width: 100%; width: 100%; max-width: 100%;
    min-height: var(--height--footer); height: var(--height--footer); max-height: var(--height--footer);
    background-color: var(--color--bg-0);

    #playingIcon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 24px;
      background-position: center;
      background-size: cover;
      /*border: 1px solid white;*/
      border-radius: 4px;
      overflow: hidden;

      transform: scale(1.5);

      &.active {
        opacity: 1;
      }
      &.inactive {
        opacity: .5;
      }

      .moving-bars-container {
        background-color: #0000006c;
      }

      .pulsor {
        transform: scale(.4);
      }
    }
  }
}

.songs-list-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;

  .song-card:not(:last-child) {
    margin-bottom: 24px;

    &::after {
      position: absolute;
      bottom: -12px;
      content: '';
      display: flex;
      min-height: 1px;
      min-width: 100%;
      background-color: var(--color--bg-20);
    }
  }
}

.song-card {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 8svh;
  /* background-color: green; */

  .cover {
    position: relative;
    display: flex;
    min-height: 100%; height: 100%; max-height: 100%;
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    overflow: hidden;
  }

  .song-infos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    height: 100%;
    color: var(--color--fg-0);
    margin-right: var(--horizontal-padding);
    border-radius: 0 8px 8px 0;
    transition: background-color .2s linear, transform .1s linear;

    & > span:first-child {
      text-transform: uppercase;
      font-weight: 600;
    }
    & > span:last-child {
      font-size: 14px;
      font-weight: 300;
      color: var(--color--fg-30);
    }

    &:active {
      /* transform: scale(1.05); */
      background-color: var(--color--bg-20);
    }

    /* Tablet */
    @media (min-width : 767px) and (max-width : 1279px) { 
      
    }
    /* Laptop */
    @media (min-width: 1280px) and (max-width: 1919px) { 
      gap: 4px;
      /* width: 85%;
      margin: 0; */

      &:hover {
        background-color: var(--color--bg-20);
      }

      & > span:first-child {
        font-size: 14px;
      }
      & > span:last-child {
        font-size: 12px;
      }
    }
    /* Desktop */
    @media (min-width: 1920px) { 
      gap: 4px;
      width: 87%;
      margin: 0;

      &:hover {
        background-color: var(--color--bg-20);
      }

      & > span:first-child {
        font-size: 14px;
      }
      & > span:last-child {
        font-size: 12px;
      }
    }
  }

  .is-liked {
    padding: 0;

    &.inactive { svg { path { fill: var(--color--fg-50); }}}
    &.active-nuwa { svg { path { fill: var(--color--nuwa); }}}
    &.active-qargo { svg { path { fill: var(--color--qargo); }}}

    /* Laptop */
    @media (min-width: 1280px) and (max-width: 1919px) { 
      margin-left: auto;
    }
    /* Desktop */
    @media (min-width: 1920px) { 
      margin-left: auto;
    }
  }
  
}


      
@keyframes animatedBarsBig {
  0% { transform: scaleY(1); }
  25% { transform: scaleY(6); }
  50% { transform: scaleY(6); }
  100% { transform: scaleY(1); }
}

@keyframes animatedBarsMedium {
  0% { transform: scaleY(1); }
  25% { transform: scaleY(4); }
  50% { transform: scaleY(4); }
  100% { transform: scaleY(1); }
}

@keyframes animatedBarsSmall {
  0% { transform: scaleY(1); }
  25% { transform: scaleY(2); }
  50% { transform: scaleY(2); }
  100% { transform: scaleY(1); }
}

@keyframes pulseBg {
  0%   { background-color: #ffffff00; }
  50%  { background-color: #ffffff3f; }
  100% { background-color: #ffffff00; }
}


@keyframes l17 {
  100% {transform: rotate(1turn)}
}

.moving-bars-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #000000b0;
  /* opacity: .66; */
  overflow: hidden;

  &.active {
    opacity: 1;
  }
  &.inactive {
    opacity: 0;
  }
}

.pulsor {
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffffc9;
  box-shadow: 0 0 0 0 #fff4;
  animation: pulsorAnimation var(--pulse-animation-timing) infinite linear;
  position: relative;

  &:before,
  &:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 #fff2;
    animation: inherit;
    animation-delay: 0;
  }
  /* &:before {
    animation-delay: calc(var(--pulse-animation-timing) / 2);
  } */
  &:after {
    animation-delay: calc(var(--pulse-animation-timing) / 4);
  }
}

@keyframes pulsorAnimation {
  0% {box-shadow: 0 0 0 0 #fff4;}
  100% {box-shadow: 0 0 0 40px #fff0;}
}




@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.loader-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  animation: pulseBg .9s infinite;

  &.playing-footer-loader {
    height: 95%;
    width: fit-content;
    aspect-ratio: 1/1 !important;
  }

  &.song-card-loader {
    .loader {
      transform: scale(.7);
    }
  }

  &.footer-loader {
    display: flex;
    left: auto;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 100%;
    aspect-ratio: 1/1 !important;
    border-radius: 4px;
    overflow: hidden;

    .loader {
      opacity: 0;
    }
  }

  &.active {
    display: flex;
  }

  &.inactive {
    display: none;
  }

  .loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    aspect-ratio: 1/1;
    margin-right: auto;
    margin-bottom: auto;
    gap: 8px;

    &.full-page {
      margin: 0;
      height: 10svh;
      margin-top: auto;
      margin-bottom: 24px;
    }
  
    & > div {
      width: 12px;
      height: 12px;
      background-color: #ffffff79;
    
      border-radius: 100%;
      -webkit-animation: sk-bouncedelay 1s infinite ease-in-out both;
      animation: sk-bouncedelay 1s infinite ease-in-out both;
    }
    
     .bounce1 {
      -webkit-animation-delay: -0.33s;
      animation-delay: -0.33s;
    }
    
     .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
  }
}