@import "TOKENS";
$color_bg: #111111;
$color_main: #aaaaaa;
$color_main_hover: #dddddd;
$color_highlight: #db4343;
$color_highlight_2: #ea8c52;



.audioplayer.skin-justthumbandbutton{
  .audioplayer-inner{
    position: relative;
    top:0; left:0;
    width: 100%;
    height: auto;
    margin: 0 auto;

    padding-top: 100%;
  }
  .the-thumb-con{
    position: absolute;
    top:0; left:0; width: 100%; height: 100%;
    .the-thumb{
      width: 100%; height: 100%;
    }
  }
  .ap-controls{
    position: absolute;
    top:0; left:0;
    width: 100%;
    height: 100%;

    .scrubbar{
      position: absolute;
      top: auto;
      bottom: 0;
      z-index: 1;
      height: 10px;
      .scrub-bg:not(.a){
        background: rgba(0,0,0,0.1);
      }
      .scrub-prog{
      }
    }

    .con-controls{
      width: 100%;
      height: 100%;

      .the-bg{
        background: transparent;
      }
    }



  }

  $size: 80px;
  .con-playpause{
    position: absolute;
    top:50%; left: 50%; width: $size; height: $size;
    margin-left: -($size/2); margin-top: -($size/2);



    $transition-property: all;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    .playbtn, .pausebtn{
      width: 100%;
      height: 100%;
      background-image: url(img/skin-justthumbandbutton-playbtn.png);
      background-size:cover;
      background-position:center center;
      border-left:0;
      border-right: 0;

      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }

    .playbtn:hover{
    }
    .pausebtn{
      background-image: url(img/skin-justthumbandbutton-pausebtn.png);
    }

    .pausebtn > *{
      display: none;
    }
  }



  .meta-artist-con{
    font-size:0;
    position: static;

    .the-songname{
      position: absolute;
      padding: 5px;
      top:0;
      left:0;

      font-size: 13px;
      color: #dddddd;
      background-color: rgba(53, 53, 53, 0.3);
      backdrop-filter: blur(15px);

      font-weight: bold;
    }
  }

}

.product .audioplayer.skin-justthumbandbutton{
  .audioplayer-inner{
    width: 100%;
  }
}