@use "@arraypress/waveform-player/dist/waveform-player";

// Waveform player dimensions.
$waveform-player-height: 100px;

.wp-block-playlist {
	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

	// Main waveform player container.
	.wp-block-playlist__waveform-player {
		width: 100%;
		margin: var(--wp--preset--spacing--20, 0.625em) 0;
		position: relative;

		&:focus-visible {
			outline: revert;
			outline-offset: revert;
		}
	}

	// Set the waveform track height and remove gap between button and waveform.
	.waveform-track {
		height: $waveform-player-height;
		gap: 0;
	}

	// WaveformPlayer button styling.
	.waveform-btn {
		border: none;
		border-radius: 0;
		border-end-start-radius: 0.125rem;
		border-start-start-radius: 0.125rem;
		width: $waveform-player-height;
		height: $waveform-player-height;
		min-width: $waveform-player-height;
		background: currentColor;
		margin: 0;

		&:hover:not(:disabled) {
			transform: none;
		}

		svg {
			width: 3rem;
			height: 3rem;
		}

		.waveform-icon-pause svg {
			// The pause icon's two full-height bars read larger than the
			// play triangle at the same SVG box size, so optically scale it
			// down to match the play icon's visual weight.
			width: 2.625rem;
			height: 2.625rem;
		}
	}

	.waveform-player.has-play-button-artwork {
		.waveform-btn {
			background-image: var(--wp--playlist--play-button-artwork);
			background-position: center;
			background-size: cover;
			color: #fff;

			svg {
				filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
			}

			svg path {
				// Override inline fills applied before artwork is added.
				fill: #fff !important;
			}
		}
	}

	.waveform-track.waveform-align-bottom .waveform-btn {
		margin-bottom: 0;
	}

	.waveform-btn:focus-visible,
	.waveform-container:focus-visible {
		outline: revert;
		outline-offset: revert;
	}

	.waveform-artist {
		opacity: 0.7;
	}

	.waveform-info,
	.waveform-artist,
	.waveform-title,
	.waveform-time {
		font-size: inherit;
	}

	.wp-block-playlist__tracklist {
		margin: 0;
		padding-left: 0;
		list-style: none;

		&.wp-block-playlist__tracklist-is-hidden {
			display: none;
		}

		&.wp-block-playlist__tracklist-artist-is-hidden {
			// Hide the artist name, which is in the playlist-track block.
			.wp-block-playlist-track__artist {
				display: none;
			}
		}

		&.wp-block-playlist__tracklist-length-is-hidden {
			// Hide the track length, which is in the playlist-track block.
			.wp-block-playlist-track__length {
				display: none;
			}
		}

		&.wp-block-playlist__tracklist-show-numbers {
			counter-reset: playlist-track;
		}
	}
}