.modern-audio-player { max-width: 400px; margin: 0 auto; background: var(--wdtTertiaryColor); border-radius: var(--wdtRadius_4X); padding: 20px; }
.wdt-light-bg .modern-audio-player { background: var(--wdtAccentTxtColor); }

.track-meta { flex: 1; }

/* Cover Img */
.cover-section { height: 250px; overflow: hidden; border-radius: var(--wdtRadius_3X); display: grid; position: relative; }
.cover-section:before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; opacity: .5; background-color: var(--wdtHeadAltColor); }
.cover-section > * { grid-area: 1/-1; }

.cover-section img,
.tracklist .track-item .track-thumb-section img { width: 100%; object-fit: cover; object-position: center center; height: 100%; }

/* Header */
.tracklist-header { padding: 20px 10px 10px; border-bottom: 1px solid var(--wdtBorderColor); margin: 0 0 10px; font-family: var(--wdtFontTypo_Base); 
	font-weight: 600; font-size: var(--wdtFontSize_Ext); display: flex ; justify-content: space-between; color: var(--wdtHeadAltColor); }

/* Track List */
.tracklist { list-style: none; padding: 0 0; margin: 0; }
.tracklist .track-item { display: flex ; align-items: center; padding: 10px 5px; border-radius: var(--wdtRadius_Zero); cursor: pointer; gap: 10px; }
.tracklist .track-item:not(:last-child) { border-bottom: 1px solid var(--wdtBorderColor); }

.tracklist .track-item .track-thumb-section { width: 50px; height: 50px; border-radius: var(--wdtRadius_1X); overflow: hidden; position: relative;
display: grid; align-items: center; }
.tracklist .track-item .track-thumb-section > div { grid-area: 1/-1; }

.tracklist .track-item .track-thumb-section .track-thumb-img { display: block; width: 100%; height: inherit; position: relative; z-index: 0; }
.tracklist .track-item .track-thumb-section .track-thumb-img::before { content: ''; position: absolute; 
	width: 100%; height: 100%; top: 0; left: 0; background-color: var(--wdtHeadAltColor); opacity: .5; z-index: 0; }

.tracklist .track-item .track-thumb-section .track-thumb-button { position: relative; display: flex; align-items: center; justify-content: center; height: inherit; z-index: 1; pointer-events: none; }
.tracklist .track-item .track-thumb-section .track-thumb-button::before,
.tracklist .track-item .track-thumb-section .track-thumb-button::after { display: inline-flex; justify-content: center; align-items: center; position: absolute; font-family: "crucifix-extra-icon"; font-size: var(--wdtFontSize_Ext); 
	top: 0; left: 0; bottom: 0; right: 0; width: 100%; text-align: center; vertical-align: middle; align-self: center; color: var(--wdtAccentTxtColor); 
	opacity: 0; -webkit-transition: var(--wdtAltTransition); transition: var(--wdtAltTransition); }
.tracklist .track-item .track-thumb-section .track-thumb-button::before { content: '\e807'; opacity: 1; }
.tracklist .track-item.active .track-thumb-section .track-thumb-button::before { opacity: 0; }
.tracklist .track-item.active .track-thumb-section .track-thumb-button::after { content: '\e86a'; font-family: "Crucifix Icons"; opacity: 1; }


.tracklist .track-item .track-meta { display: flex; flex-direction: column; gap: 0; line-height: var(--wdtLineHeight_Base); font-family: var(--wdtFontTypo_Base);
	font-weight: var(--wdtFontWeight_Base); font-size: var(--wdtFontSize_Ext); color: var(--wdtBodyTxtColor);  }
.tracklist .track-item .track-meta .track-title { font-weight: var(--wdtFontWeight_Ext); color: var(--wdtHeadAltColor); }
.tracklist .track-item .track-duration { font-weight: var(--wdtFontWeight_Ext); font-size: var(--wdtFontSize_Ext); color: var(--wdtHeadAltColor); }