/**
 * Styles for Plyr audio player block
 * These styles are applied both in the editor and on the front-end
 */

.wp-block-carhop-blocks-audio-player {
	.plyr__controls {
		padding: 2rem 0 !important;
	}
	--plyr-color-main: var(--wp--preset--color--primary);
	--plyr-menu-border-color: var(--wp--preset--color--carhop-green);
	--plyr-menu-border-shadow-color: var(--wp--preset--color--carhop-green);
	// --plyr-control-radius: 50%;

	--plyr-control-icon-size: 20px;
	--plyr-audio-control-color: var(--wp--preset--color--primary);
	// Utiliser la couleur directement depuis tailwind.config.js ligne 32
	// --plyr-audio-range-track-background: #9df2de;
	--plyr-audio-range-track-background: var(
		--wp--preset--color--carhop-green--200
	);
	border: 1px solid var(--wp--preset--color--primary);
	padding: 2rem;

	button[data-plyr="play"],
	button[data-plyr="mute"] {
		border-radius: 50%;
		border: 1px solid var(--wp--preset--color--primary);
		padding: 2rem;
	}

	button[data-plyr="mute"] {
		padding: 1rem;
	}

	.audio-player__title {
		text-transform: uppercase;
		font-size: 1.5rem;
		font-weight: 600;
		color: var(--wp--preset--color--primary);
		margin: 0;
	}

	.audio-player__details {
		&__label {
			margin-right: 0.5rem;
			text-transform: uppercase;
		}
	}

	// Plyr container styles
	// .plyr {
	// 	border-radius: 8px;
	// }

	// // Customize Plyr colors if needed
	// .plyr--audio .plyr__control.plyr__tab-focus,
	// .plyr--audio .plyr__control:hover,
	// .plyr--audio .plyr__control[aria-expanded="true"] {
	// 	background: #21759b;
	// }

	// .plyr__control--overlaid {
	// 	background: rgba(33, 117, 155, 0.8);
	// }
}

// .plyr--full-ui input[type="range"] {
// 	color: red;
// }

// .plyr__control--overlaid {
// 	background: rgba(red, 0.8);
// }

// .plyr--video .plyr__control.plyr__tab-focus,
// .plyr--video .plyr__control:hover,
// .plyr--video .plyr__control[aria-expanded="true"] {
// 	background: red;
// }

// .plyr__control.plyr__tab-focus {
// 	box-shadow: 0 0 0 5px rgba(red, 0.5);
// }

// .plyr__menu__container
// 	.plyr__control[role="menuitemradio"][aria-checked="true"]::before {
// 	background: red;
// }
