@import "/ui/styles/_theme.scss";
@import "/ui/components/kbdrow/kbdrow.scss";

MenuKeyBindings {
	flex-direction: column;
	gap: 4px;

	.binding-row {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 10px 16px;
		background-color: $panel-glass-dim;
		border: 1px solid $border;
		border-left: 3px solid $secondary-strong;

		.binding-action {
			font-family: $font-primary;
			font-size: 18px;
			font-weight: 700;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: $text;
			flex-grow: 1;
		}

		.binding-keys {
			flex-direction: row;
			align-items: center;
			gap: 6px;
			flex-shrink: 0;
		}

		.binding-plus {
			font-family: $font-code;
			font-size: 14px;
			color: $text-dim;
			opacity: 0.7;
		}
	}
}