.wp-block-piano-block-piano {
	position: relative;
	color: #1d2327;

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

	.piano-block-container {
		padding-top: 16px;
	}

	.components-button {
		color: inherit !important;
		background: #fff !important;

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

	// Loading Component
	.piano-block-loading {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		display: flex;
		flex-flow: column;
		gap: 8px;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
	}

	// Controls component
	.piano-block-controls {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		align-items: flex-start;
		width: calc(100% - 32px);
		max-width: 818px;
		padding: 8px 50px 8px 16px;
		margin: 0 auto;
		background: #fff;
		border-radius: 2px;

		&__control {

			.components-base-control__label,
			.components-input-control__label {
				display: block;
				padding: 0 !important;
				margin-bottom: 8px !important;
				font-size: 11px;
				font-weight: 500;
				line-height: 1.4;
				text-transform: uppercase;
			}

			.components-base-control__field {
				margin-bottom: 0;
			}

			.components-toggle-control {
				margin-bottom: 0;

				.components-base-control__field {
					flex-flow: column-reverse;
					align-items: flex-start;

					.components-flex {
						flex-flow: column-reverse;
						gap: 0;
						align-items: flex-start;
					}
				}

				.components-toggle-control__label {
					margin-bottom: 8px;
					font-size: 11px;
					font-weight: 500;
					text-transform: uppercase;
				}

				.components-form-toggle__input {
					cursor: pointer;
				}
			}

			.components-select-control {
				gap: 0;
			}

			.components-select-control__input {
				font-size: inherit !important;
				line-height: 30px;

				&:focus {
					outline: none;
				}
			}

			.components-range-control__root {
				vertical-align: top;
			}

			.components-button-group .components-button {
				height: 30px;
			}

			&--volume {
				width: 170px;
			}

			&--instrument {
				display: flex;
				align-items: flex-end;

				> .components-button {
					width: 30px;
					min-width: 30px;
					height: 30px;
					padding: 4px;
					margin-left: 8px;
				}
			}
		}
	}

	// Keyboard Component
	.piano-block-keyboard {
		position: relative;
		padding: 16px 0;

		&.is-scroll {
			overflow-x: scroll;
		}

		&__inner {
			box-sizing: border-box;
			display: flex;
			height: 205px;
			margin: 0 auto;
		}

		&__key {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			padding: 0;
			padding-bottom: 8px;
			font-size: 14px;
			font-weight: normal;
			text-transform: uppercase;

			&:focus-visible {
				outline: var(--wp-admin-theme-color) auto 4px;
			}

			// &:focus:not(:focus-visible) {
			// 	outline: none;
			// }

			&--black {
				position: relative;
				width: 34px;
				height: 120px;
				margin: 0 -17px;
				color: #fff !important;
				background: linear-gradient(to bottom, #666 0%, #000 100%) !important;
				border-color: #000;
				border-style: solid;
				border-width: 0 6px 8px;
				border-bottom-color: #666;
				border-radius: 0 0 4px 4px;
				box-shadow: 0 3px 5px #ccc, inset 0 0 0 1px rgb(220 220 220 / 20%);
				transition: background 0.03s, border-bottom-width 0.03s;
			}

			&--white {
				flex: 1;
				height: 200px;
				color: #000 !important;
				background-color: #fff !important;
				border: 1px #999 solid;
				border-bottom: none;
				border-radius: 0 0 3px 3px;
				box-shadow: 0 4px 4px #aaa;
				transition: height 0.03s, box-shadow 0.03s;
			}

			&.is-pressed,
			&:active {

				&.piano-block-keyboard__key--black {
					background: linear-gradient(to bottom, #666 50%, #000 100%);
					border-bottom-width: 4px;
				}

				&.piano-block-keyboard__key--white {
					height: 204px;
					background: linear-gradient(to bottom, #ccc 10%, #fff);
					box-shadow: 0 2px 2px #aaa;
				}
			}
		}
	}
}

// SynthesizerSetting component
.piano-block-synthesizer-setting {
	width: 240px;
	max-width: 100%;
	padding: 8px 16px;
	overflow: hidden;

	.components-base-control__field {
		margin: 0;
	}

	&__envelope {
		display: flex;
		flex-wrap: wrap;
		gap: 0 16px;
		margin-top: 8px;

		.components-range-control {
			width: calc(50% - 8px);
		}

		.components-base-control__label {
			display: block;
			margin-bottom: 0;
		}
	}

	&__graph {
		display: block;
		width: 100%;
		height: 80px;
		margin: 8px 0;
		border: 1px solid var(--wp-admin-theme-color);
	}

	&__reset.components-button {
		display: block;
		margin-left: auto;
		color: #cc1818 !important;
	}
}

// Help component
.piano-block-help {
	position: absolute;
	top: 8px;
	right: 8px;
}

.piano-block-help-modal {
	font-size: 13px;
	color: #1d2327;

	&.piano-block-help-modal {
		max-width: 500px;
	}

	.components-modal__header {

		h1 {
			font-size: 20px;
			font-style: normal;
			color: inherit;
		}

		.components-button {
			color: inherit !important;
			background-color: #fff !important;
		}
	}

	&__content {

		> *:last-child {
			margin-bottom: 0 !important;
		}

		ul {
			padding-left: 1.5em;
			margin: 0 0 1em;
			font-size: inherit;
			list-style: disc outside;
		}

		p {
			margin: 0 0 1em;
			font-size: inherit;
			color: inherit;
		}
	}
}