/**
 * @author Valentin Alisch <hallo@valentinalisch.de>
 * @version 2.0.6
 *
 * AudioJS.css
 */



/**
 * Wrap
 * 
 * @since 2.0
 */
audio-wrap,
.audio-wrap {
	display: flex;
	overflow: hidden;
	position: relative;
	flex-direction: column;
	justify-content: center;
	background: var( --audio-background, transparent );
	width: 100%;
}

	audio-wrap *,
	.audio-wrap * {
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;

		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}



/**
 * Player
 * 
 * @since 2.0
 */
audio-player,
.audio-player {
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	overflow: hidden;
}



/**
 * Controls
 * 
 * @since 2.0
 */
audio-controls,
.audio-controls {
	display: flex;
}

audio-control,
.audio-control {
	cursor: pointer;
	flex-shrink: 0;
}



audio-wrap[data-state="buffering"] audio-control[data-trigger="ajs:play"],
.audio-wrap[data-state="buffering"] audio-control[data-trigger="ajs:play"],
audio-wrap[data-state="buffering"] .audio-control[data-trigger="ajs:play"],
.audio-wrap[data-state="buffering"] .audio-control[data-trigger="ajs:play"],
audio-wrap[data-state="playing"] audio-control[data-trigger="ajs:play"],
.audio-wrap[data-state="playing"] audio-control[data-trigger="ajs:play"],
audio-wrap[data-state="playing"] .audio-control[data-trigger="ajs:play"],
.audio-wrap[data-state="playing"] .audio-control[data-trigger="ajs:play"] {
	display: none;
}

audio-wrap[data-state=""] audio-control[data-trigger="ajs:pause"],
.audio-wrap[data-state=""] audio-control[data-trigger="ajs:pause"],
audio-wrap[data-state=""] .audio-control[data-trigger="ajs:pause"],
.audio-wrap[data-state=""] .audio-control[data-trigger="ajs:pause"],
audio-wrap[data-state="loaded"] audio-control[data-trigger="ajs:pause"],
.audio-wrap[data-state="loaded"] audio-control[data-trigger="ajs:pause"],
audio-wrap[data-state="loaded"] .audio-control[data-trigger="ajs:pause"],
.audio-wrap[data-state="loaded"] .audio-control[data-trigger="ajs:pause"],
audio-wrap[data-state="paused"] audio-control[data-trigger="ajs:pause"],
.audio-wrap[data-state="paused"] audio-control[data-trigger="ajs:pause"],
audio-wrap[data-state="paused"] .audio-control[data-trigger="ajs:pause"],
.audio-wrap[data-state="paused"] .audio-control[data-trigger="ajs:pause"],
audio-wrap[data-state="ended"] audio-control[data-trigger="ajs:pause"],
.audio-wrap[data-state="ended"] audio-control[data-trigger="ajs:pause"],
audio-wrap[data-state="ended"] .audio-control[data-trigger="ajs:pause"],
.audio-wrap[data-state="ended"] .audio-control[data-trigger="ajs:pause"],
audio-wrap:not( [data-state] ) audio-control[data-trigger="ajs:pause"],
.audio-wrap:not( [data-state] ) audio-control[data-trigger="ajs:pause"],
audio-wrap:not( [data-state] ) .audio-control[data-trigger="ajs:pause"],
.audio-wrap:not( [data-state] ) .audio-control[data-trigger="ajs:pause"] {
	display: none;
}

audio-wrap[data-is-muted="true"] audio-control[data-trigger="ajs:mute"],
.audio-wrap[data-is-muted="true"] audio-control[data-trigger="ajs:mute"],
audio-wrap[data-is-muted="true"] .audio-control[data-trigger="ajs:mute"],
.audio-wrap[data-is-muted="true"] .audio-control[data-trigger="ajs:mute"],
audio-wrap:not( [data-is-muted] ) audio-control[data-trigger="ajs:mute"],
.audio-wrap:not( [data-is-muted] ) audio-control[data-trigger="ajs:mute"],
audio-wrap:not( [data-is-muted] ) .audio-control[data-trigger="ajs:mute"],
.audio-wrap:not( [data-is-muted] ) .audio-control[data-trigger="ajs:mute"] {
	display: none;
}

audio-wrap[data-is-muted="false"] audio-control[data-trigger="ajs:unmute"],
.audio-wrap[data-is-muted="false"] audio-control[data-trigger="ajs:unmute"],
audio-wrap[data-is-muted="false"] .audio-control[data-trigger="ajs:unmute"],
.audio-wrap[data-is-muted="false"] .audio-control[data-trigger="ajs:unmute"] {
	display: none;
}



/**
 * Progress
 * 
 * @since 2.0
 */
audio-progress,
.audio-progress {
	display: flex;
	flex: 1;
}

audio-progress-bar,
.audio-progress-bar {
	flex: 1;
	cursor: pointer;
	position: relative;
}

audio-progress-bar::after,
.audio-progress-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc( var( --progress, 0 ) * 100% );
	background: var( --audio-progress-bar-background, currentColor );
}



/**
 * Tracks
 * 
 * @since 2.0
 */
audio-tracks,
.audio-tracks {
	display: block;
}

audio-track,
.audio-track {
	display: block;
	cursor: pointer;
}