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


$color_bg: #111111;
$color_main: #aaaaaa;
$color_main_hover: #dddddd;
$color_highlight: #db4343;
$color_highlight_2: #ea8c52;

$classmain: ".audioplayer.skin-minimal";


.audioplayer.skin-minimal {


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

  .skin-minimal-bg {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border-radius: 50%;
  }


  .skin-minimal--outer-bg {

    background-color: rgba(30, 30, 30, 0.05);
  }
  .skin-minimal--inner-bg-under {

    $offset: 11px;

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


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


    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:not(.a) {
      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 .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 .pausebtn > div {
  display: none;
}

.audioplayer.skin-minimal .ap-controls .con-pausebtn .pausebtn-canvas {
  width: 100%;
  height: 100%;
}