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;
} audio-player,
.audio-player {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
overflow: hidden;
} audio-controls,
.audio-controls {
display: flex;
}
audio-control,
.audio-control {
cursor: pointer;
flex-shrink: 0;
}
audio-wrap[data-state="buffering"] audio-control[data-trigger="play"],
.audio-wrap[data-state="buffering"] audio-control[data-trigger="play"],
audio-wrap[data-state="buffering"] .audio-control[data-trigger="play"],
.audio-wrap[data-state="buffering"] .audio-control[data-trigger="play"],
audio-wrap[data-state="playing"] audio-control[data-trigger="play"],
.audio-wrap[data-state="playing"] audio-control[data-trigger="play"],
audio-wrap[data-state="playing"] .audio-control[data-trigger="play"],
.audio-wrap[data-state="playing"] .audio-control[data-trigger="play"] {
display: none;
}
audio-wrap[data-state=""] audio-control[data-trigger="pause"],
.audio-wrap[data-state=""] audio-control[data-trigger="pause"],
audio-wrap[data-state=""] .audio-control[data-trigger="pause"],
.audio-wrap[data-state=""] .audio-control[data-trigger="pause"],
audio-wrap[data-state="loaded"] audio-control[data-trigger="pause"],
.audio-wrap[data-state="loaded"] audio-control[data-trigger="pause"],
audio-wrap[data-state="loaded"] .audio-control[data-trigger="pause"],
.audio-wrap[data-state="loaded"] .audio-control[data-trigger="pause"],
audio-wrap[data-state="paused"] audio-control[data-trigger="pause"],
.audio-wrap[data-state="paused"] audio-control[data-trigger="pause"],
audio-wrap[data-state="paused"] .audio-control[data-trigger="pause"],
.audio-wrap[data-state="paused"] .audio-control[data-trigger="pause"],
audio-wrap[data-state="ended"] audio-control[data-trigger="pause"],
.audio-wrap[data-state="ended"] audio-control[data-trigger="pause"],
audio-wrap[data-state="ended"] .audio-control[data-trigger="pause"],
.audio-wrap[data-state="ended"] .audio-control[data-trigger="pause"],
audio-wrap:not( [data-state] ) audio-control[data-trigger="pause"],
.audio-wrap:not( [data-state] ) audio-control[data-trigger="pause"],
audio-wrap:not( [data-state] ) .audio-control[data-trigger="pause"],
.audio-wrap:not( [data-state] ) .audio-control[data-trigger="pause"] {
display: none;
}
audio-wrap[data-is-muted="true"] audio-control[data-trigger="mute"],
.audio-wrap[data-is-muted="true"] audio-control[data-trigger="mute"],
audio-wrap[data-is-muted="true"] .audio-control[data-trigger="mute"],
.audio-wrap[data-is-muted="true"] .audio-control[data-trigger="mute"],
audio-wrap:not( [data-is-muted] ) audio-control[data-trigger="mute"],
.audio-wrap:not( [data-is-muted] ) audio-control[data-trigger="mute"],
audio-wrap:not( [data-is-muted] ) .audio-control[data-trigger="mute"],
.audio-wrap:not( [data-is-muted] ) .audio-control[data-trigger="mute"] {
display: none;
}
audio-wrap[data-is-muted="false"] audio-control[data-trigger="unmute"],
.audio-wrap[data-is-muted="false"] audio-control[data-trigger="unmute"],
audio-wrap[data-is-muted="false"] .audio-control[data-trigger="unmute"],
.audio-wrap[data-is-muted="false"] .audio-control[data-trigger="unmute"] {
display: none;
} 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 );
} audio-tracks,
.audio-tracks {
display: block;
}
audio-track,
.audio-track {
display: block;
cursor: pointer;
}