@use "./variables" as pianoBlockVariables;

@mixin control-label {
	display: block;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--wpds-typography-font-weight-emphasis);
	line-height: inherit;
	color: inherit;
	text-transform: uppercase;
}

@mixin control-display-panel {
	background: #141414;
	border: 1px solid #3c3c3c;
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 60%);
}

@mixin control-display-text {
	color: pianoBlockVariables.$control-display-color;
	text-shadow: pianoBlockVariables.$control-display-text-shadow;
}

@mixin control-focus-ring {
	outline: var(--wpds-border-width-focus) solid pianoBlockVariables.$control-focus-color;
	outline-offset: var(--wpds-border-width-focus);
}