/* =========================
   Music & Audio
   ========================= */
.add-playlist-icon{
	font-size:20px;
}
.add-playlist i, .download-song i {
	position: relative;
	top: 2px;
}
.song-duration{
	font-size:10px;
}
.playlist-feed{
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
}
.song-item{
	display:flex;
	align-items: center;
}
.player-song-name, .player-close {
	color:#888;
	font-weight:700;
}
.player-holder{
	background: white;
	border-top: 1px solid rgba(0,0,0,.125);
}
#playlist-offcanvas {
	margin-bottom:90px;
	overflow-y:auto;
	width:450px;
}
#playlist-offcanvas.waveform-enabled {
	margin-bottom:150px;
}


.play-song{
	display: flex;
	align-items: center;
	height: 40px;
	width: 40px;
	cursor:pointer;
	z-index:2;
}
.music-index .play-song, .music-item .play-song {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	color: black;
	background-color: rgb(255,255,255,1);
	font-size: 20px;
	border-radius: 100%;
	box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 50%);
}
.music-backdrop{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	backdrop-filter: blur(100px);
	filter:brightness(70%);
}
.player-actions span {
	width:35px;
	height:30px;
	align-items:center;
	justify-content:center;
	display:flex;
}
.item-card{
	background: rgb(239,239,239);
	background: linear-gradient(0deg, rgba(250,250,250,1) 0%, rgba(255,255,255,0) 100%);
}
.music-item-icon-bottom-holder{
	position: absolute;
	top: 30px;
}
.music-index-card-image{
	aspect-ratio: 1/1 !important;
}
.song-duration{
	font-size: 12px;
}

.music-info-bottom {
	margin-bottom: .2rem;
	background: rgba(0,0,0,0.4);
	box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;

	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;

  }

/* =========================
   Dark Mode (Default)
   ========================= */
[data-bs-theme="dark"] .player-song-name,
[data-bs-theme="dark"] .player-close,
.player-song-name, .player-close {
    color: #ddd !important;
}
[data-bs-theme="dark"] .player-holder,
.player-holder {
    background-color: var(--darkElement) !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
[data-bs-theme="dark"] #playlist-offcanvas,
[data-bs-theme="dark"] #playlist,
#playlist-offcanvas, #playlist {
    background-color: var(--darkElement) !important;
}
[data-bs-theme="dark"] .playlist-item,
.playlist-item {
    color: #fff;
}

[data-bs-theme="dark"] .item-card,
.item-card {
    background: var(--darkPrimary);
}

/* =========================
   Light Mode
   ========================= */
[data-bs-theme="light"] .player-song-name, [data-bs-theme="light"] .player-close {
    color: #333 !important;
}
[data-bs-theme="light"] .player-holder {
    background-color: #fff !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
[data-bs-theme="light"] #playlist-offcanvas, [data-bs-theme="light"] #playlist {
    background-color: #fff !important;
}
[data-bs-theme="light"] .playlist-item {
    color: #222;
}
[data-bs-theme="light"] .item-card {
    background: #f9f9f9;
}