/* ===== VARIABLES ===== */

.ytpl-theme-default {
	--ytpl-highlight: #444444;
	--ytpl-mousedown: #e9e9e9;
	--ytpl-title-color: #ffffff;
	--ytpl-active-title-color: #ffffff;
	--ytpl-hover-scale: 1.03;
	--ytpl-background: rgba(0, 0, 0, 0.8);
}

.ytpl-theme-blue {
	--ytpl-highlight: #1976d2;
	--ytpl-mousedown: #e3f2fd;
	--ytpl-title-color: #0b3c8a;
	--ytpl-active-title-color: #ffffff;
	--ytpl-hover-scale: 1.03;
	--ytpl-background: #f4f9ff;
}

.ytpl-theme-red {
	--ytpl-highlight: #d32f2f;
	--ytpl-mousedown: #fdecea;
	--ytpl-title-color: #7f1d1d;
	--ytpl-active-title-color: #ffffff;
	--ytpl-hover-scale: 1.03;
	--ytpl-background: #fff5f5;
}

.ytpl-theme-green {
	--ytpl-highlight: #2e7d32;
	--ytpl-mousedown: #e8f5e9;
	--ytpl-title-color: #1b5e20;
	--ytpl-active-title-color: #ffffff;
	--ytpl-hover-scale: 1.03;
	--ytpl-background: #f4fbf6;
}

/* ===== Item base ===== */
.YoutubePlayList .ytpl .d-flex {
	padding: 0.75rem 1rem;
	transition: transform 0.3s ease;
	cursor: pointer;
}

/* ===== Fondo contenedor ===== */
.YoutubePlayList .YoutubeListWidget {
	background-color: var(--ytpl-background);
}

/* ===== Hover ===== */
.YoutubePlayList .ytpl .d-flex:hover {
	transform: scale(var(--ytpl-hover-scale));
	z-index: 10;
	position: relative;
	background-color: var(--ytpl-highlight);
}

/* ===== Activo ===== */
.YoutubePlayList .ytpl .d-flex.ytpl-active {
	background-color: var(--ytpl-highlight);
	color: var(--ytpl-title-color);
}

/* ===== Flecha ===== */
.YoutubePlayList .current-arrow {
	color: var(--ytpl-title-color);
	font-weight: bold;
	margin-right: 0.5rem;
	padding-right: 0.5rem;
}

/* ===== Título ===== */
.YoutubePlayList .ytpl-title {
	text-align: left;
	font-size: 0.87rem;
	font-weight: bold;
	max-height: 1.87rem;
	overflow: hidden;
	color: var(--ytpl-title-color);
	margin: 0;
}

/* ===== Título en hover y activo ===== */
.YoutubePlayList .ytpl .d-flex:hover .ytpl-title,
.YoutubePlayList .ytpl .d-flex.ytpl-active .ytpl-title {
	color: var(--ytpl-active-title-color);
}

/* ===== flecha en hover y activo ===== */
.YoutubePlayList .ytpl .d-flex:hover .current-arrow,
.YoutubePlayList .ytpl .d-flex.ytpl-active .current-arrow {
	color: var(--ytpl-active-title-color);
}