$color_bg: #111111;
$color_main: #aaaaaa;
$color_main_hover: #dddddd;
$color_highlight: #db4343;
$color_highlight_2: #ea8c52;
$font_highlight: "Open Sans", "Helvetica Neue", "Helvetica", Arial, sans-serif;
$classmain: ".audioplayer.skin-justthumbandbutton";


.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;
      height: 10px;
      z-index: 5;
      .scrub-bg{
        background: rgba(0,0,0,0.1);
      }
      .scrub-prog{
        background: rgba(108, 159, 255, 0.46);
      }
    }

    .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;
    }
  }




}

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