@use "sass:math";
@use "@wordpress/base-styles/variables" as variables;
@use "@wordpress/base-styles/colors" as colors;
@use "@wordpress/base-styles/mixins" as mixins;
@use "../../variables" as pianoBlockVariables;

.piano-block-keyboard {
	position: relative;
	padding: variables.$grid-unit-20 0;
	overflow-x: auto;
	// Prevents padding from being applied to the left and right sides.
	scrollbar-gutter: auto !important;

	@include mixins.custom-scrollbars-on-hover(transparent, rgba(colors.$white, 0.8));

	.piano-block-keyboard__inner {
		box-sizing: border-box;
		display: flex;
		width: pianoBlockVariables.$white-key-width * pianoBlockVariables.$white-key-count;
		height: pianoBlockVariables.$white-key-height;
		padding: 0 variables.$grid-unit-20;
		margin: 0 auto;
	}

	.piano-block-keyboard__key {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 0 0 variables.$grid-unit-10;
		font-size: variables.$font-size-x-small;
		font-weight: normal;
		text-transform: uppercase;
		margin: 0;

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

		&:focus {
			outline: none;
		}

		&:hover {
			cursor: pointer;
		}

		&.is-pressed,
		&:active {

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

			&.piano-block-keyboard__key--white {
				height: pianoBlockVariables.$white-key-height + variables.$grid-unit-05;
				background: linear-gradient(to bottom, #ccc 10%, colors.$white);
				box-shadow: 0 2px 2px #aaa;
			}
		}
	}

	.piano-block-keyboard__key--black {
		position: relative;
		width: pianoBlockVariables.$black-key-width;
		height: variables.$grid-unit-10 * 14;
		margin: 0 math.div(pianoBlockVariables.$black-key-width, 2) * -1;
		color: colors.$white !important;
		background: linear-gradient(to bottom, #666 0%, colors.$black 100%) !important;
		border-color: colors.$black;
		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%);
		z-index: 1;

		@media not (prefers-reduced-motion) {
			transition: background 0.03s, border-bottom-width 0.03s;
		}
	}

	.piano-block-keyboard__key--white {
		flex: 1;
		height: 100%;
		color: colors.$black !important;
		background-color: colors.$white !important;
		border: 1px colors.$gray-600 solid;
		border-bottom: none;
		border-radius: 0 0 3px 3px;
		box-shadow: 0 4px 4px #aaa;

		@media not (prefers-reduced-motion) {
			transition: height 0.03s, box-shadow 0.03s;
		}
	}
}