/**
 * Generate Audiogram Block styles (for both the editor and front-end).
 */

.wp-block-generate-audiogram-block-audiogram {
	background-color: #fff;
	box-shadow: inset 0 0 0 1px #1e1e1e;
	outline: 1px solid transparent;
	padding: 1em;

	video {
		max-width: 100%;
	}

	div.audiogram-preview {
		max-width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		&.processing {
			display: none;
		}
	}

	p.captions {
		color: #fff;
		font-weight: bold;
		padding: 0.5em;
		text-align: left;
	}
}