@use "sass:math";
@use "sass:meta";

.wp-block-piano-block-piano {
	position: relative;
	padding: var(--wpds-dimension-padding-lg) 0;
	color: var(--wpds-color-foreground-content-neutral);
	box-sizing: border-box;

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

	// Nest the component styles under the block class, so they win over
	// the theme's element and attribute selectors such as `[type=button]`,
	// which are loaded after the block styles.
	@include meta.load-css("./components/loading/style");
	@include meta.load-css("./components/spinner/style");
	@include meta.load-css("./components/controls/style");
	@include meta.load-css("./components/icon-button/style");
	@include meta.load-css("./components/knob/style");
	@include meta.load-css("./components/select/style");
	@include meta.load-css("./components/stepper/style");
	@include meta.load-css("./components/synthesizer-setting/style");
	@include meta.load-css("./components/help/style");
	@include meta.load-css("./components/keyboard/style");
}