$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-minimal";




.audioplayer.skin-minimal{




  .scrubbar,.audioplayer-inner .the-thumb-con{
    display: none;
  }

  .skin-minimal-bg{

    position: absolute;

    top:0;
    left:0;
    background-color: rgba(30,30,30,0.05);

    width: 100%;
    height: 100%;

    border-radius: 50%;
  }




  .skin-minimal--inner-bg-under{

    $offset: 11px;

    width: calc(100% - #{$offset*2});
    height: calc(100% - #{$offset*2});

    background-color: $color_highlight;
    top: $offset;
    left: $offset;
  }

  .skin-minimal--inner-bg{

    $offset: 11px;

    width: calc(100% - #{$offset*2});
    height: calc(100% - #{$offset*2});

    background-color: rgba(255,255,255,0.15);
    top: $offset;
    left: $offset;
  }

  .skin-minimal--inner-inner-bg{

    $offset: 22px;

    width: calc(100% - #{$offset*2});
    height: calc(100% - #{$offset*2});

    background-color: $color_highlight;
    top: $offset;
    left: $offset;
  }


  .meta-artist-con{
    display: none;
  }

  .the-bg{
    z-index: auto;
  }
  .audioplayer-inner{

    width:auto;
    display: inline-block;
  }

  .ap-controls{
    height:100px;
    width:auto;
    display: inline-block;
    .the-bg{
      background-color: transparent;
    }

    .con-playpause .playbtn{

      background-position: center center;
      background-repeat: no-repeat;
      width:100%;
      height:100%;

      content: " ";
      border: solid transparent;
      border-color: rgba(136, 183, 213, 0);
      border-left-color: transparent;
      border-width: 0px;
      border-left-width: 0px;
      background-size: cover;




    }

    .con-playpause{
      >*{

        >svg{
          @include centerit();

          width: 20px;
          height: 20px;

          path{
            fill: #eee;
          }
        }
      }
    }


    .con-playpause.canvas-fallback .playbtn{

      background-image: url(img/playbtn.png);
      background-size: cover;


    }

    .con-playpause .playbtn-canvas, .con-playpause .pausebtn-canvas{
      width:100%;
      height:100%;
    }

    .con-controls{
      width: 100px;
      height: 100px;
      display: inline-block;
      position: relative;
    }

    .con-playpause{
      top: 0px;
      left:0px;

      $size: 100%;
      width:$size;
      height:$size;
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      position: absolute;
    }
  }
}






.audioplayer.skin-minimal .ap-controls .con-playpause .pausebtn{

  background-position: center center;
  background-repeat: no-repeat;
  width:100%;
  height:100%;

  content: " ";
  border: solid transparent;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: transparent;
  border-width: 0px;
  border-left-width: 0px;
  background-size: cover;
}
.audioplayer.skin-minimal .ap-controls .con-playpause.canvas-fallback .pausebtn{

  background-image: url(img/pausebtn.png);
  background-size: cover;


}
.audioplayer.skin-minimal .ap-controls .con-playpause .pausebtn > div{
  display: none;
}
.audioplayer.skin-minimal .ap-controls .con-pausebtn .pausebtn-canvas{
  width:100%;
  height:100%;
}