@use "sass:math";
@use "@wordpress/base-styles/colors" as colors;
@use "./components/piano/style" as piano;
@use "./components/loading/style" as loading;
@use "./components/controls/style" as controls;
@use "./components/synthesizer-setting/style" as synthesizerSetting;
@use "./components/help-modal/style" as helpModal;
@use "./components/keyboard/style" as keyboard;

.wp-block-piano-block-piano {
	position: relative;
	color: colors.$gray-900;
	box-sizing: border-box;

	&:not(.has-background) {
		background: url(../assets/block_bg.png);
	}

	// Override theme button style.
	.components-button {
		color: inherit !important;
		background: colors.$white !important;

		&.is-primary {
			color: colors.$white !important;
			background: var(--wp-admin-theme-color, #007cba) !important;
		}

		&.is-destructive {
			color: colors.$alert-red !important;
		}

		&:focus,
		&:hover {
			text-decoration: none !important;
		}
	}
}