@use "../variables" as pianoBlockVariables;
@use "../mixins" as pianoBlockMixins;

.piano-block-knob {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: var(--wpds-typography-font-size-xs);
	line-height: var(--wpds-typography-line-height-xs);

	.piano-block-knob__label {

		@include pianoBlockMixins.control-label;
	}

	.piano-block-knob__control {
		position: relative;
		width: 30px;
		height: 30px;
		cursor: ns-resize;
		touch-action: none;
	}

	// The input only provides the semantics and the keyboard interaction.
	.piano-block-knob__input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		opacity: 0;
		pointer-events: none;
		appearance: none;
	}

	.piano-block-knob__dial {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle at 50% 25%, #5c5c5c 0%, #3a3a3a 45%, #262626 100%);
		border: 1px solid #0d0d0d;
		border-radius: 50%;
		box-shadow: inset 0 1px 1px rgb(255 255 255 / 20%), 0 2px 4px rgb(0 0 0 / 60%);
	}

	.piano-block-knob__input:focus-visible + .piano-block-knob__dial {

		@include pianoBlockMixins.control-focus-ring;

		// Match the other controls, whose outline Chromium turns into
		// Highlight because they are the focused element.
		@media (forced-colors: active) {
			outline-color: Highlight;
		}
	}

	.piano-block-knob__indicator {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		// Draw the line with a border instead of a background gradient,
		// because forced colors mode removes background gradients.
		&::before {
			position: absolute;
			top: 3px;
			left: calc(50% - 1px);
			height: 8px;
			content: "";
			border-left: 2px solid #fff;
		}
	}

	.piano-block-knob__value {

		@include pianoBlockMixins.control-display-panel;
		position: absolute;
		bottom: calc(100% + 6px);
		left: 50%;
		z-index: 1;
		display: none;
		min-width: 7ch;
		padding: 1px 4px;
		transform: translateX(-50%);

		@include pianoBlockMixins.control-display-text;
		text-align: center;

		&::before,
		&::after {
			position: absolute;
			left: 50%;
			content: "";
			border: 5px solid transparent;
			border-bottom: 0;
			transform: translateX(-50%);
		}

		&::before {
			top: calc(100% + 1px);
			border-top-color: #3c3c3c;
		}

		&::after {
			top: 100%;
			border-top-color: #141414;
		}
	}

	&:not(.is-value-hidden):is(:hover, .is-turning, :not(.is-pointer-focused):has(.piano-block-knob__input:focus-visible)) .piano-block-knob__value {
		display: block;
	}
}