/**
 * @name		Page Builder CK
 * @copyright	Copyright (C) 2024. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */

.cktype[data-type="audio"] .pbck-audio-element audio {
	min-height: 0;
	width: 100%;
}

.cktype[data-type="audio"] > .inner {
	--pbck-audio-slider-color: rgba(255,255,255,0.5);
	--pbck-audio-slider-cursor-color: #fff;
	--pbck-audio-svg-icon-color: #fff;
	--pbck-audio-time-color: #fff;
	--pbck-audio-bg-color: #333;
	--pbck-audio-text-color: #fff;
	background-color: var(--pbck-audio-bg-color);
	color: var(--pbck-audio-text-color);
	font-family: sans-serif;
	font-size: 14px;
}

.cktype[data-type="audio"] .pbck-audio-player-bar {
	display: flex;
}

.cktype[data-type="audio"] svg {
	width: 25px;
	height: auto;
	cursor: pointer;
}

.cktype[data-type="audio"] svg:hover {
	opacity: 0.7;
}

.cktype[data-type="audio"] .pbck-audio-play-pause-button {
	display: flex;
	align-items: center;
}

.cktype[data-type="audio"] .pbck-audio-play-pause-button.play svg.pbck-audio-play {
	display: block;
}

.cktype[data-type="audio"] .pbck-audio-play-pause-button svg.pbck-audio-pause,
.cktype[data-type="audio"] .pbck-audio-play-pause-button.play svg.pbck-audio-pause {
	display: none;
}

.cktype[data-type="audio"] .pbck-audio-play-pause-button.pause svg.pbck-audio-play {
	display: none;
}

.cktype[data-type="audio"] .pbck-audio-play-pause-button.pause svg.pbck-audio-pause {
	display: block;
}

.cktype[data-type="audio"] .pbck-audio-volume-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5px;
}

.cktype[data-type="audio"] .pbck-audio-volume-control {
	width: 70px;
}

.cktype[data-type="audio"] .pbck-audio-timeline {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: 0 5px;
}

.cktype[data-type="audio"] .pbck-audio-timeline input {
	width: 100%;
}

.cktype[data-type="audio"] .pbck-audio-time {
	display: flex;
	line-height: 55px;
	font-size: 14px;
	font-weight: normal;
	white-space: normal;
	color: var(--pbck-audio-time-color);
}

.cktype[data-type="audio"] .pbck-audio-thumb img {
	width: var(--pbck-audio-thumb-width);
	height: var(--pbck-audio-thumb-height);
	object-fit: cover;
}

.cktype[data-type="audio"] .pbck-audio-volume-toggler {
	display: flex;
}

.cktype[data-type="audio"] .pbck-audio-volume-toggler:hover {
	stroke: red;
}

.cktype[data-type="audio"] .pbck-audio-volume-toggler svg.pbck-audio-volume-off {
	display: none;
}
.cktype[data-type="audio"] .pbck-audio-volume-toggler.volume-off svg.pbck-audio-volume-on {
	display: none;
}

.cktype[data-type="audio"] .pbck-audio-volume-toggler.volume-off svg.pbck-audio-volume-off {
	display: block;
}

/** for slider range **/

/* https://range-input-css.netlify.app/ */
/*********** Baseline, reset styles ***********/
.cktype[data-type="audio"] input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

/* Removes default focus */
.cktype[data-type="audio"] input[type="range"]:focus {
	outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
.cktype[data-type="audio"] input[type="range"]::-webkit-slider-runnable-track {
	background-color: var(--pbck-audio-slider-color);
	border-radius: 0.5rem;
	height: 0.5rem;
}

/* slider thumb */
.cktype[data-type="audio"] input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	margin-top: -4px; /* Centers thumb on the track */
	background-color: var(--pbck-audio-slider-cursor-color);
	border-radius: 0.5rem;
	height: 1rem;
	width: 1rem;
}

.cktype[data-type="audio"] input[type="range"]:focus::-webkit-slider-thumb {
	outline: 3px solid var(--pbck-audio-slider-cursor-color);
	outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
.cktype[data-type="audio"] input[type="range"]::-moz-range-track {
	background-color: var(--pbck-audio-slider-color);
	border-radius: 0.5rem;
	height: 0.5rem;
}

/* slider thumb */
.cktype[data-type="audio"] input[type="range"]::-moz-range-thumb {
	background-color: var(--pbck-audio-slider-cursor-color);
	border: none; /*Removes extra border that FF applies*/
	border-radius: 0.5rem;
	height: 1rem;
	width: 1rem;
}

.cktype[data-type="audio"] input[type="range"]:focus::-moz-range-thumb{
	outline: 3px solid var(--pbck-audio-slider-cursor-color);
	outline-offset: 0.125rem;
}

/** Preset layouts **/

/* layout 1 */
.cktype[data-type="audio"][data-preset-layout="1"] .pbck-audio-player {
	background: var(--pbck-audio-thumb);
	background-size: cover;
	background-position: center center;
}

.cktype[data-type="audio"][data-preset-layout="1"] .pbck-audio-thumb {
	display: none;
}

/* layout 2 */
.cktype[data-type="audio"][data-preset-layout="2"] .pbck-audio-player {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.cktype[data-type="audio"][data-preset-layout="2"] .pbck-audio-player:before {
	display: block;
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--pbck-audio-thumb);
	background-size: cover;
	background-position: center;
	filter: blur(10px);
	transform: scale(1.1);
}

.cktype[data-type="audio"][data-preset-layout="2"] .pbck-audio-thumb {
	text-align: center;
}

/* layout 3 */
.cktype[data-type="audio"][data-preset-layout="3"] .pbck-audio-player {
	background: var(--pbck-audio-thumb);
	background-size: cover;
	background-position: center center;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: end;
}

.cktype[data-type="audio"][data-preset-layout="3"] .pbck-audio-thumb {
	display: none;
}

.cktype[data-type="audio"][data-preset-layout="3"] .pbck-audio-player-bar {
	background-color: var(--pbck-audio-bg-color);
}

/* layout 4 */
.cktype[data-type="audio"][data-preset-layout="4"] .pbck-audio-player {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.cktype[data-type="audio"][data-preset-layout="4"] .pbck-audio-thumb {
	text-align: center;
}

/* layout 5 */
.cktype[data-type="audio"][data-preset-layout="5"] .pbck-audio-player {
	position: relative;
	min-height: 100px;
}

.cktype[data-type="audio"][data-preset-layout="5"] .pbck-audio-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height:100%;
}

.cktype[data-type="audio"][data-preset-layout="5"] .pbck-audio-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.cktype[data-type="audio"][data-preset-layout="5"] .pbck-audio-player-bar,
.cktype[data-type="audio"][data-preset-layout="5"] .pbck-audio-artist,
.cktype[data-type="audio"][data-preset-layout="5"] .pbck-audio-album {
	margin-left: 100px;
}

/* layout 6 */
.cktype[data-type="audio"][data-preset-layout="6"] .pbck-audio-player {
	position: relative;
	min-height: 200px;
}

.cktype[data-type="audio"][data-preset-layout="6"] .pbck-audio-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height:100%;
}

.cktype[data-type="audio"][data-preset-layout="6"] .pbck-audio-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.cktype[data-type="audio"][data-preset-layout="6"] .pbck-audio-player-bar,
.cktype[data-type="audio"][data-preset-layout="6"] .pbck-audio-artist,
.cktype[data-type="audio"][data-preset-layout="6"] .pbck-audio-album {
	margin-left: 200px;
}

/* layout 7 */
.cktype[data-type="audio"][data-preset-layout="7"] .pbck-audio-player {
	position: relative;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cktype[data-type="audio"][data-preset-layout="7"] .pbck-audio-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height:100%;
}

.cktype[data-type="audio"][data-preset-layout="7"] .pbck-audio-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.cktype[data-type="audio"][data-preset-layout="7"] .pbck-audio-player-bar,
.cktype[data-type="audio"][data-preset-layout="7"] .pbck-audio-artist,
.cktype[data-type="audio"][data-preset-layout="7"] .pbck-audio-album {
	margin-left: 50%;
}

.cktype[data-type="audio"][data-preset-layout="7"] .pbck-audio-player-bar {
	margin-top: auto;
}
.cktype[data-type="audio"][data-preset-layout="7"] .pbck-audio-album {
	margin-top: auto;
}



/* layout 8 */
.cktype[data-type="audio"][data-preset-layout="8"] .pbck-audio-player {
	background-color: var(--pbck-audio-bg-color);
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: end;
}

.cktype[data-type="audio"][data-preset-layout="8"] .pbck-audio-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* layout 9 */
.cktype[data-type="audio"][data-preset-layout="9"] .pbck-audio-player {
	background-color: var(--pbck-audio-bg-color);
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: end;
	position: relative;
}


.cktype[data-type="audio"][data-preset-layout="9"] .pbck-audio-thumb {
	height: 200px;
}

.cktype[data-type="audio"][data-preset-layout="9"] .pbck-audio-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.cktype[data-type="audio"][data-preset-layout="9"] .pbck-audio-player-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200px;
	align-items: end;
}

.cktype[data-type="audio"][data-preset-layout="9"] .pbck-audio-time {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	justify-content: center;
	font-size: 50px;
	margin-top: 50px;
}