/**
 * VEFmusic — shared button look (2.16.22).
 *
 * One look for every button, whatever its shape: accent background, text
 * colour from Style > General, full strength at rest, the same dimming on
 * hover/focus, the same focus ring, the same disabled look. Only the shape
 * (radius, size, padding, icon) stays in each component's own stylesheet.
 *
 * Plain class selectors on purpose: a theme's `button { ... }` rule must not
 * beat them, and this file loads first (it is a dependency of every other
 * VEFmusic stylesheet).
 *
 * Adjustable from Style > General (or custom CSS):
 *   --vefm-btn-hover-opacity     hover/focus strength   (default .85)
 *   --vefm-btn-disabled-opacity  disabled strength      (default .6)
 */

/* 1. Filled buttons: the look at rest. */
.vefm-play,
.vefm-playlist-playpause,
.vefm-playlist-shuffle,
.vefm-concert-ticket-link,
.vefm-add-to-cart,
.vefm-buy-album,
.vefm-rp-toggle,
.vefm-rp-stop,
.vefm-ratings-submit {
	border: 0;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
	cursor: pointer;
	font-family: var( --vefm-font-family, inherit );
	opacity: 1;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

/* Links styled as buttons keep their colours against the theme's a:hover. */
.vefm-concert-ticket-link:hover,
.vefm-concert-ticket-link:focus,
.vefm-concert-ticket-link:active {
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
	text-decoration: none;
}

/* 2. Ghost controls (no fill): icon toggles, text toggles. */
.vefm-lyrics-toggle,
.vefm-volume-toggle,
.vefm-rp-volume-toggle,
.vefm-concert-description-toggle,
.vefm-rate-form .vefm-rate-cancel {
	opacity: 1;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

/* 3. Hover / keyboard focus: the same dimming everywhere. */
.vefm-play:is( :hover, :focus-visible ):not( :disabled, .vefm-play--disabled ),
.vefm-playlist-playpause:is( :hover, :focus-visible ):not( :disabled ),
.vefm-playlist-shuffle:is( :hover, :focus-visible ):not( :disabled ),
.vefm-concert-ticket-link:is( :hover, :focus-visible ),
.vefm-add-to-cart:is( :hover, :focus-visible ):not( :disabled ),
.vefm-buy-album:is( :hover, :focus-visible ):not( :disabled ),
.vefm-rp-toggle:is( :hover, :focus-visible ):not( :disabled ),
.vefm-rp-stop:is( :hover, :focus-visible ):not( :disabled ),
.vefm-ratings-submit:is( :hover, :focus-visible ):not( :disabled ),
.vefm-album-cover-flip .vefm-album-cover-toggle:is( :hover, :focus-visible ):not( :disabled ),
.vefm-lightbox .vefm-lightbox-button:is( :hover, :focus-visible ):not( :disabled ),
.vefm-lyrics-toggle:is( :hover, :focus-visible ),
.vefm-volume-toggle:is( :hover, :focus-visible ),
.vefm-rp-volume-toggle:is( :hover, :focus-visible ),
.vefm-concert-description-toggle:is( :hover, :focus-visible ),
.vefm-rate-form .vefm-rate-cancel:is( :hover, :focus-visible ) {
	opacity: var( --vefm-btn-hover-opacity, 0.85 );
}

/* 4. Pressed in: the button sinks slightly under the pointer (hover and
   keyboard focus), a bit more while clicked. Never on a disabled button, not
   at all when the visitor asked for less motion, and the hover part only on
   devices that really hover (a tap on a phone would leave it sunk).
   --vefm-btn-hover-scale (default .97) adjusts it. */
@media ( prefers-reduced-motion: no-preference ) {
	.vefm-play:focus-visible:not( :disabled, .vefm-play--disabled ),
	.vefm-playlist-playpause:focus-visible:not( :disabled ),
	.vefm-playlist-shuffle:focus-visible:not( :disabled ),
	.vefm-concert-ticket-link:focus-visible,
	.vefm-add-to-cart:focus-visible:not( :disabled ),
	.vefm-buy-album:focus-visible:not( :disabled ),
	.vefm-rp-toggle:focus-visible:not( :disabled ),
	.vefm-rp-stop:focus-visible:not( :disabled ),
	.vefm-ratings-submit:focus-visible:not( :disabled ),
	.vefm-album-cover-flip .vefm-album-cover-toggle:focus-visible:not( :disabled ),
	.vefm-lightbox .vefm-lightbox-button:focus-visible:not( :disabled ),
	.vefm-lyrics-toggle:focus-visible,
	.vefm-volume-toggle:focus-visible,
	.vefm-rp-volume-toggle:focus-visible,
	.vefm-concert-description-toggle:focus-visible,
	.vefm-rate-form .vefm-rate-cancel:focus-visible {
		transform: scale( var( --vefm-btn-hover-scale, 0.97 ) );
	}

	@media ( hover: hover ) {
		.vefm-play:hover:not( :disabled, .vefm-play--disabled ),
		.vefm-playlist-playpause:hover:not( :disabled ),
		.vefm-playlist-shuffle:hover:not( :disabled ),
		.vefm-concert-ticket-link:hover,
		.vefm-add-to-cart:hover:not( :disabled ),
		.vefm-buy-album:hover:not( :disabled ),
		.vefm-rp-toggle:hover:not( :disabled ),
		.vefm-rp-stop:hover:not( :disabled ),
		.vefm-ratings-submit:hover:not( :disabled ),
		.vefm-album-cover-flip .vefm-album-cover-toggle:hover:not( :disabled ),
		.vefm-lightbox .vefm-lightbox-button:hover:not( :disabled ),
		.vefm-lyrics-toggle:hover,
		.vefm-volume-toggle:hover,
		.vefm-rp-volume-toggle:hover,
		.vefm-concert-description-toggle:hover,
		.vefm-rate-form .vefm-rate-cancel:hover {
			transform: scale( var( --vefm-btn-hover-scale, 0.97 ) );
		}
	}

	.vefm-play:active:not( :disabled, .vefm-play--disabled ),
	.vefm-playlist-playpause:active:not( :disabled ),
	.vefm-playlist-shuffle:active:not( :disabled ),
	.vefm-concert-ticket-link:active,
	.vefm-add-to-cart:active:not( :disabled ),
	.vefm-buy-album:active:not( :disabled ),
	.vefm-rp-toggle:active:not( :disabled ),
	.vefm-rp-stop:active:not( :disabled ),
	.vefm-ratings-submit:active:not( :disabled ),
	.vefm-album-cover-flip .vefm-album-cover-toggle:active:not( :disabled ),
	.vefm-lightbox .vefm-lightbox-button:active:not( :disabled ),
	.vefm-lyrics-toggle:active,
	.vefm-volume-toggle:active,
	.vefm-rp-volume-toggle:active,
	.vefm-concert-description-toggle:active,
	.vefm-rate-form .vefm-rate-cancel:active {
		transform: scale( 0.95 );
	}
}

/* 5. Focus ring: visible on any background (accent on filled buttons,
   the text colour on ghost controls). */
.vefm-play:focus-visible,
.vefm-playlist-playpause:focus-visible,
.vefm-playlist-shuffle:focus-visible,
.vefm-concert-ticket-link:focus-visible,
.vefm-add-to-cart:focus-visible,
.vefm-buy-album:focus-visible,
.vefm-rp-toggle:focus-visible,
.vefm-rp-stop:focus-visible,
.vefm-ratings-submit:focus-visible,
.vefm-album-cover-flip .vefm-album-cover-toggle:focus-visible {
	outline: 2px solid var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	outline-offset: 2px;
}

.vefm-lyrics-toggle:focus-visible,
.vefm-volume-toggle:focus-visible,
.vefm-rp-volume-toggle:focus-visible,
.vefm-concert-description-toggle:focus-visible,
.vefm-rate-form .vefm-rate-cancel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* 6. Disabled: one look. */
.vefm-play:disabled,
.vefm-playlist-playpause:disabled,
.vefm-playlist-shuffle:disabled,
.vefm-add-to-cart:disabled,
.vefm-buy-album:disabled,
.vefm-rp-toggle:disabled,
.vefm-rp-stop:disabled,
.vefm-ratings-submit:disabled {
	opacity: var( --vefm-btn-disabled-opacity, 0.6 );
	cursor: default;
}