@import "../../../css/_mixins.scss";
@import "../../../css/_trx_addons.vars.scss";

/* Audio player's styles */
.trx_addons_audio_wrap {
	position: relative;
}
.trx_addons_audio_list {
    position: relative;
}
.trx_addons_audio_wrap.list .trx_addons_audio_player:not(:first-child) {
    @include abs-pos(auto, 0, 0, 0, 1);
    opacity: 0;
}
.trx_addons_audio_wrap.resized.list .trx_addons_audio_player {
    @include abs-pos(0, 0, 0, 0, 1);
}
.trx_addons_audio_wrap.list .trx_addons_audio_player.current {
    opacity: 1;
    z-index: 2;
}
.trx_addons_audio_wrap.list .trx_addons_audio_player_wrap {
	position: relative;
    height: 100%;
}
.trx_addons_audio_wrap.resized.list .audio_frame {
    position: absolute;
    bottom: 0;
}
.trx_addons_audio_player {
	padding: 1em;
	position:relative;
	@include border-box;
}
.trx_addons_audio_player.with_cover {
	@include bg-cover;
}
.trx_addons_audio_player.with_cover:after {
	content:' ';
	@include bg-mask(#000, 0.5, 1);
}
.trx_addons_audio_player.with_cover .mejs-controls {
	background: none;	// !important;
}
.trx_addons_audio_player.without_cover {
	border: 1px solid #f0f0f0;
	background-color:#f7f7f7;
}
.trx_addons_audio_player .audio_info {
	position:relative;
	z-index:2;
	overflow: hidden;
}
.trx_addons_audio_player .audio_author,
.trx_addons_audio_player .audio_caption {
	margin: 0.5em 0 1em;
}
:where(body:not(.trx_addons_customizable_theme))
.trx_addons_audio_player .audio_author + .audio_caption {
	margin-top: -0.5em;
}
.trx_addons_audio_player .audio_frame {
	width:100%;
	position:relative;
	z-index:2;
}
.trx_addons_audio_player .audio_info+.audio_embed,
.trx_addons_audio_player .audio_info+.audio_frame {
	margin-top: 1em;
}
.widget_subtitle + .trx_addons_audio_wrap {
    margin-top: 2em;
}
.trx_addons_audio_player .audio_now_playing {
	margin-top: 1em;
	margin-bottom: 1em;
}
:where(body:not(.trx_addons_customizable_theme)) {
	.trx_addons_audio_wrap .trx_addons_audio_navigation,
	.trx_addons_audio_player .audio_now_playing {
		@include font(0.9em, 1.4rem, 600);
		letter-spacing: 1px;
		text-transform: uppercase;
	}
}
.trx_addons_audio_wrap .trx_addons_audio_navigation,
.trx_addons_audio_player .audio_now_playing {
	z-index: 2;
	position: relative;
}
.trx_addons_audio_wrap.with_cover .trx_addons_audio_navigation,
.trx_addons_audio_player.with_cover .audio_now_playing,
.trx_addons_audio_player.with_cover .audio_author,
.trx_addons_audio_player.with_cover .audio_caption,
.trx_addons_audio_player.with_cover .audio_description {
	color: #fff;
}
.trx_addons_audio_wrap .trx_addons_audio_navigation {
	@include abs-pos(2.55em, 2.5em, auto, auto, 2);
}
.trx_addons_audio_wrap .trx_addons_audio_navigation > span {
	padding: 0 5px;
	cursor: pointer;
	display: inline-block;
	@include transition-all;
	opacity: 0.7;
	vertical-align: top;
}
.trx_addons_audio_wrap .trx_addons_audio_navigation > span:hover {
	opacity: 1;
}
.trx_addons_audio_wrap .trx_addons_audio_navigation > span span {
	@include font(1.4rem, 1em, 400);
	@include square(1em);
	display: inline-block;
	vertical-align: top;
	margin-top: -1px;
}
.trx_addons_audio_wrap.hide_time .mejs-time {
    display:  none !important;
}
.trx_addons_audio_wrap.hide_scroll .mejs-time-rail {
    display:  none !important;
}
.trx_addons_audio_wrap.hide_volume .mejs-horizontal-volume-slider {
    display:  none !important;
}
.hide_scroll .mejs-controls .mejs-duration-container {
    margin-left: 10px;
}
.trx_addons_audio_player .mejs-container {
    min-height: 30px;
}
@media (max-width: 1439px) {
	.audio_now_playing {
	    margin-top: 0;
	}
	.trx_addons_audio_navigation {
		@include abs-pos(2em, 2em, auto, auto, 2);
	}
}
@media (max-width: 1279px) {
	.trx_addons_audio_navigation {
		@include abs-pos(2em, 1.6em, auto, auto, 2);
	}
}
@media (max-width: 767px) {
	// .trx_addons_audio_wrap.list .trx_addons_audio_player {
	//     padding-top: 5em;
	// }
	.trx_addons_audio_wrap .mejs-horizontal-volume-slider {
	    display:  none !important;
	}
	.trx_addons_audio_navigation {
		@include abs-pos(2.55em, auto, auto, 1.2em, 2); 
	}
}

// Cover at left or right side
.trx_addons_audio_wrap.cover_left,
.trx_addons_audio_wrap.cover_right {
	@include flex;
	@include flex-direction(row);
	@include flex-align-items(stretch);
	@include flex-justify-content(space-between);
	gap: 30px;

	.trx_addons_audio_cover {
		position: relative;
		@include flex-basis(50%);
	}
	.trx_addons_audio_list_wrap {
		position: relative;
		@include flex-basis(50%);
	}
	.trx_addons_audio_cover_item {
		@include abs-cover;
		@include bg-cover;
		@include transition-property(opacity);
		opacity: 0;
		
		&.current {
			opacity: 1;
			z-index: 2;
		}
	}
}
.trx_addons_audio_wrap.cover_right {
	.trx_addons_audio_cover {
		order: 2;
	}
	.trx_addons_audio_list_wrap {
		order: 1;
	}
}
@media (max-width: 767px) {
	.trx_addons_audio_wrap.cover_left,
	.trx_addons_audio_wrap.cover_right {
		@include flex-direction(column);
		@include flex-align-items(stretch);
		@include flex-justify-content(flex-start);
		gap: 10px;

		.trx_addons_audio_cover {
			order: 1;
			flex-basis: 100%;
			width: 100%;
			min-height: 200px;
		}
		.trx_addons_audio_list_wrap {
			order: 2;
			flex-basis: 100%;
			width: 100%;
		}
	}
}


// Playlist
.trx_addons_audio_playlist {
	position: relative;
}
.trx_addons_audio_playlist_item {
	@include flex;
	@include flex-direction(row);
	@include flex-align-items(center);
	@include flex-justify-content(space-between);
	@include border-box;
	font-weight: 500;
	padding: 1em;
	background-color: #ffffff;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	@include transition-colors;

	h1,h2,h3,h4,h5,h6,p {
		color: inherit;
	}
}
.trx_addons_audio_playlist_item_title {
	margin: 0;
}
.trx_addons_audio_playlist_item_title_number {
	margin-right: 0.5em;
}
.trx_addons_audio_playlist_item_meta {
	@include transition-colors;
	font-weight: normal;
}