@use "@wordpress/base-styles/variables" as variables;
@use "@wordpress/base-styles/colors" as colors;
@use "../../variables" as pianoBlockVariables;

.piano-block-controls {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: variables.$grid-unit-20;
	align-items: flex-start;
	width: calc(100% - variables.$grid-unit-40);
	max-width: pianoBlockVariables.$white-key-width * pianoBlockVariables.$white-key-count - variables.$grid-unit-40;
	padding: variables.$grid-unit-10 variables.$grid-unit-60 variables.$grid-unit-10 variables.$grid-unit-20;
	margin: 0 auto;
	background: #fff;
	border-radius: variables.$radius-small;

	.components-range-control {
		width: variables.$grid-unit-10 * 16; // 128px

		.components-range-control__root {
			min-height: variables.$button-size-compact;
		}

		.components-range-control__reset {
			height: variables.$button-size-compact;
		}
	}

	.components-toggle-control {

		.components-flex {
			flex-flow: column-reverse;
			align-items: flex-start;
			gap: variables.$grid-unit-20;
		}

		.components-toggle-control__label {
			font-size: variables.$font-size-x-small;
			font-weight: variables.$font-weight-medium;
			line-height: variables.$default-line-height;
			text-transform: uppercase;
		}
	}

	.piano-block-controls__synthesizer-toggle {
		display: flex;
		align-self: flex-end;
	}

	.piano-block-controls__help {
		position: absolute;
		top: variables.$grid-unit-10;
		right: variables.$grid-unit-10;
	}
}