/****************************************/
/*                                      */
/*         Section 1: The Looks         */
/*                                      */
/****************************************/


/* 1. The Main Container */
.audio_player {
	position: relative;
	z-index: 0;
	width: 100%;
}

/* 2. The Player Button – General */
.audio_player>div:nth-child(1) div {
	width: 28px;
	height: 28px;
	margin-top: -13px;
	border-radius: 50%;
	background-color: #2563eb;
}

.audio_player>div:nth-child(1) div:after {
	position: absolute;
	top: 4px;
	left: 9px;
	width: 16px;
	height: 16px;
}

/* Set here how much the button exceeds the horizontal track limits: */
/* This must not be deleted! (but can be changed, of course) */
:root {
	--button-protrusion: 4px;
}

/* 2.a) The Player Button – Off */
.audio_player>div:nth-child(1) div.off:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23ffffff' d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");
}

/* 2.b) The Player Button – Loading */
.audio_player>div:nth-child(1) div.load:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23ffffff' d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V96c0 17.7 14.3 32 32 32s32-14.3 32-32V32zm0 384c0-17.7-14.3-32-32-32s-32 14.3-32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V416zM0 256c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zm416-32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H416zM75 75c-12.5 12.5-12.5 32.8 0 45.3l45.3 45.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L120.2 75C107.7 62.5 87.5 62.5 75 75zM391.8 346.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L391.8 437c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-45.3-45.3zM75 437c12.5 12.5 32.8 12.5 45.3 0l45.3-45.3c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L75 391.8c-12.5 12.5-12.5 32.8 0 45.3zM346.5 120.2c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L437 120.2c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-45.3 45.3z'/></svg>");
	animation: audio_load_rotate 1s infinite linear;
	top: 5px;
	left: 5px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes audio_load_rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* 2.c) The Player Button – Playing */
.audio_player>div:nth-child(1) div.play {
	background-color: #2563eb !important;
}

.audio_player>div:nth-child(1) div.play:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23ffffff' d='M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z'/></svg>");
}

/* 2.d) The Player Button – Dragging */
.audio_player>div:nth-child(1) div.drag {
	transition: left 0s !important;
	cursor: grab !important;
}

/* 2.e) The Player Button – Error */
.audio_player>div:nth-child(1) div.error {
	background-color: rgba(0, 0, 0, 0.35) !important;
}

.audio_player>div:nth-child(1) div.error:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/></svg>");
}

/* 3. The Track */
.audio_player>div:nth-child(2) {
	height: 2px;
}

.audio_player>div:nth-child(2):after {
	content: "";
	position: absolute;
	z-index: 0;
	background-color: #d1d5db;
	mix-blend-mode: multiply;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

/* 4. The Loading Progress Bar */
.audio_player>div:nth-child(2) div {
	background-color: #60a5fa;
	mix-blend-mode: multiply;
}

/* 5. The Click & Drag Sensor */
.audio_player>div:nth-child(3) {
	height: 18px;
	margin-top: -8px;
}


/****************************************/
/*                                      */
/*        Section 2: Core Values        */
/*                                      */
/****************************************/


/* 1. The Main Container + General Settings */
.audio_player,
.audio_player * {
	user-select: none !important;
	-webkit-user-select: none !important;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-overflow-scrolling: auto;
}

.audio_player *:focus {
	outline: none;
}

/* 2. The Player Button */
.audio_player>div:nth-child(1) div {
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: pointer;
}

/* 2.a) Container for Player Button */
.audio_player>div:nth-child(1) {
	position: absolute;
	z-index: 3;
	height: 0px;
	top: 0px;
	left: calc(var(--button-protrusion) * -1);
	width: calc(100% + (2 * var(--button-protrusion)));
}

/* 3. The Track */
.audio_player>div:nth-child(2) {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* 4. The Loading Progress Bar */
.audio_player>div:nth-child(2) div {
	position: absolute;
	z-index: 1;
	width: 0%;
	height: 100%;
	top: 0px;
	left: 0px;
	transition: width 0.5s;
}

/* 5. The Click & Drag Sensor */
.audio_player>div:nth-child(3) {
	position: absolute;
	z-index: 2;
	width: 100%;
	top: 0px;
	left: 0px;
}