/*
 * Author: Audio Player with Playlist
 * Website: https://digitalzoomstudio.net/
 * Portfolio: https://bit.ly/nM4R6u
 * Version: 3.00
 * */

@import "inc/TOKENS";



$transition-property: all;
$transition-duration: 0.3s;
$transition-timing: ease-out;

$ANIMATION_DURATION: 0.3s;


.meta-artist {
  text-align: left;
}



/* -- functional styling */

$size: 30px;

@import "inc/player";



.con-playpause-con {
  white-space: nowrap;
}


$color_bg: #464545;
$color_main: #aaaaaa;
$color_main_hover: #dddddd;
$color_highlight: #ae1919;


.audioplayer-tobe {
  opacity: 0;
}
.audioplayer-tobe.for-add {
  display: none;

}


.audioplayer, .audioplayer-tobe {


  $transition-property: opacity;
  $transition-duration: $ANIMATION_DURATION;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);


  > div[class^="feed-"] {
    display: none;
  }

  i {

    &, & + .i-label {

      display: inline-block;
      vertical-align: middle;
    }
  }
}

.audioplayer {

  position: relative;
  width: 100%;
  height: auto;
  line-height: 1;

  opacity: 1;

  * {
    @include boxsizing();
  }



  .meta-artist {
    width: auto;
  }

  .ap-controls {

    width: 100%;
    height: 40px;

    .the-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .con-controls {
      width: 100%;
      height: 30px;
      line-height: 100%;
    }

    .con-playpause {

      width: 10px;
      height: 10px;
      position: relative;

      .playbtn {
        position: absolute;
        top: 0;
        left: 0;
      }

      .pausebtn {

        height: 11px;
        width: 11px;
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 0;

        .pause-icon {
          width: 100%;
          height: 100%;

        }
      }


    }

  }

  .meta-artist-con {
    position: absolute;
    left: 28px;
    bottom: 9px;
    max-width: 50%;
    overflow-x: hidden;
    overflow-y: visible;
    font-size: 11px;
    visibility: hidden;
    opacity: 0;
    line-height: 1.1;
  }


  .curr-time {
    position: absolute;
    padding: 4px 7px;
    font-size: 12px;
    top: auto;
    bottom: 4px;
    line-height: 1;


  }

  .total-time {
    position: absolute;
    padding: 3px 7px;
    font-size: 10px;
    top: auto;
    bottom: 6px;
    right: auto;
    line-height: 1;

    opacity: 0;
    $transition-property: opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

  }


  .sample-block-start, .sample-block-end {
    height: 100%;
    background-color: transparent;
    cursor: default;
    position: relative;
  }

  .sample-block-end {
    top: -100%;
  }

  .total-time + .meta-artist-con {
    margin-left: 5px;
  }

  $transition-property: width;
  $transition-duration: 0.1s;
  $transition-timing: ease-out;


  .ap-controls-right {
    float: right;

    > * {
    }

    &:empty {
      display: none !important;
    }
  }

  .ap-controls-right:after {
    content: "";
    display: block;
    clear: both;
  }


  .btn-footer-playlist {
    margin-left: 15px;

    cursor: pointer;

    opacity: 1;

    $transition-property: width, height, margin, opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    &.is-empty {
      width: 0;
      height: 0;
      margin-left: 0;

      opacity: 0;
    }
  }

}

@import "inc/controls/comments";
@import "inc/player/ap_extraclasses";
@import "inc/volume";

$color_player_but: #444444;

@import "./inc/player-buttons";
.the-artist {
  &:empty {
    display: none;
  }
}



.audioplayer.meta-loaded, .audioplayer.structure-setuped {

  .meta-artist-con, .prev-btn, .next-btn {

    opacity: 1;
    visibility: visible;
  }
}


.audioplayer.transitioning-change-media {
  overflow: hidden;
}



.audioplayer:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

@import "inc/player/playerErroredOut";


.audioplayer .item-tobe {
  position: relative;
}

.audioplayer .ap-controls .con-controls {
  position: absolute;
}

.audioplayer .ap-controls .con-playpause {
  cursor: pointer;
}


.audioplayer.under-400 .meta-artist-con {
  .the-artist {
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}

.audioplayer.under-400:not(.zoomsounds-wrapper-bg-bellow) {
  .controls-volume {
    display: none;
  }









}

;


.audioplayer.dzsap-loaded {
  .prev-btn, .next-btn, .btn-menu-state, .btn-embed-code {
    visibility: visible;
  }
}

/* -- functional styling END */


/* -- estethic styling */


.dzsap-main-con {
  z-index: 5555;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  visibility: hidden;
}


.audioplayer .audioplayer-inner {
  position: relative;
}



.audioplayer.dzsap-loaded .meta-artist-con {
  visibility: visible;
}

@import "inc/scrubbar/basic_scrub";




/* -- SKIN-default styling END */


/* -- SKIN-wave styling */

@import 'inc/player-skins/ap_skin_wave';
@import "inc/scrubbar/mode_wave";


.skin-wave.skin-wave-mode-normal {
  .ap-controls {
    .con-controls {
      height: auto;
    }
  }
}


.dzsap-wishlist {
  .audioplayer {
    margin-bottom: 10px;
  }
}


@import "inc/compatibility";



@import "inc/playlist";


/* skin-wave simple END */

@import "inc/miscButtons";





/* ==========SKIN-wave-mode-small styling END */

@import "inc/player/ap_skinvariation_wave_bigtitles";




/* ==========SKIN-minimal styling */

@import "inc/player-skins/ap_skin_minion";
/* ==========SKIN-minimal styling ENDD */



/* -- END SKIN-justthumbandbutton styling */






/* -- SKIN-steel styling ENDD */

@import "inc/player/ap_extrahtml";



$color_bg: #eaeaea;
$color_text: #222222;

@import "inc/controls/buttons";



@import "inc/player-skins/ap_skin_customcontrols";




/* ==========SKIN-justthumbandbutton styling ENDD */

/*===========
=================================
===========
======================
Audio Gallery
=================================
*/


@import "inc/zoomsounds_nav";


@import "inc/dzsap_layouts";



.from-wc_generate_player {

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

$nav_margin: 5px;




@import "inc/player/ap_wrappers";




@import "inc/mode_showall";

$transition-property: all;
$transition-duration: 0.3s;
$transition-timing: ease-out;








$color_bg: #db4343;
$color_text: #eee;

@import "inc/player/ap_stick_to_bottom_wrapper";


@import "inc/player/ap_icons";
@import "inc/player/external_songChanger";



/*

dzs tooltips

arrow-top,
arrow-bottom
 -- align-left
 -- align-center (js)
 -- align-top

arrow-left,
arrow-right
 -- align-top
 -- align-center (js)
 -- align-bottom


custom css3 effects

*see about custom animation

*/


@import "inc/tooltip";
@import "inc/responsive";


@import "inc/player/ap_playlistInner";


.extra-btns-con {

  margin-top: 5px;
}



html body .zoomsounds-add-tocart-btn:not(.a) {
  border: 1px solid rgba(255, 255, 255, 0.4);

  color: #fff9f9;

  background-color: transparent;
  cursor: pointer;

  padding: 10px 15px;

  > * {
    display: inline-block;
    vertical-align: middle;
  }

  &:first-child {

    margin-left: 25px;
  }
}


.cus-menu-item .cus-menu-item--thumb {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  width: 50px;
  height: 50px;
  background-size: cover;
}

.cus-menu-item .cus-menu-item--text {
  display: inline-block;
  vertical-align: middle;
}

.cus-menu-item:after {
  content: "";
  clear: both;
}




.icon-svg {
  > svg {
    width: 100%;
    height: 100%;

    path {
      fill: inherit;
    }
  }
}



.buy-con {
  margin-top: 25px;
  text-align: center;
}

@import "inc/general";


@import "inc/colors";
@import "inc/controls/embed";