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

@import "css_playlist/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;




.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;
    }
  }
    &.dzsap-inited{
      opacity: 1;
    }
}

@import "css_player/player";

@import "css_playlist/controls/comments";
@import "css_player/player/ap_extraclasses";
@import "css_player/volume";

$color_player_but: #444444;

@import "css_player/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 "css_player/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 "css_playlist/scrubbar/basic_scrub";




/* -- SKIN-default styling END */


/* -- SKIN-wave styling */

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


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


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


@import "css_playlist/compatibility";



@import "css_playlist/playlist";


/* skin-wave simple END */

@import "css_playlist/miscButtons";





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

@import "css_player/player/ap_skinvariation_wave_bigtitles";






/* -- END SKIN-justthumbandbutton styling */






/* -- SKIN-steel styling ENDD */

@import "css_player/player/ap_extrahtml";



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

@import "css_playlist/controls/buttons";






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

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


@import "css_playlist/zoomsounds_nav";


@import "css_playlist/playlist/dzsap_layouts";



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

$nav_margin: 5px;




@import "css_player/player/ap_wrappers";




@import "css_playlist/mode_showall";

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








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

@import "css_player/player/ap_stick_to_bottom_wrapper";


@import "css_player/player/ap_icons";
@import "css_player/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 "css_playlist/tooltip";
@import "css_playlist/responsive";


@import "css_player/player/ap_playlistInner";


.extra-btns-con {

  margin-top: 5px;
}






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

    path {
      fill: inherit;
    }
  }
}

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

@import "css_playlist/general";


@import "css_skins/colors";
@import "css_playlist/controls/embed";
