@use "sass:math";
@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;
	padding-top: var(--wpds-dimension-padding-lg);
	color: var(--wpds-color-foreground-content-neutral);
	box-sizing: border-box;

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

	// Override the theme's button styles.
	.components-button {
		color: inherit !important;
		background: var(--wpds-color-background-interactive-neutral) !important;

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

		&.is-destructive {
			color: var(--wpds-color-foreground-interactive-error) !important;
		}

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