Range_middle height CSS selector?

[mrzamin]

1). How do I change the height of the middle range "range_middle" to be the same as the day_button_height? See attached screenshot and CSS code. It looks ackward because the background is different height than the cell. I want both to be shorter height ideally, which is why I changed the day_button_height. I don't see a CSS selector for the range_middle height.

.rdp-root {
	--rdp-accent-color: #013369;
	--rdp-accent-background-color: #013369;
	--rdp-nav_button-height: 16px;
	--rdp-nav_button-width: 16px;
	--rdp-range_middle-background-color: #ecedee; // i want the middle range to have same height as my day_button_height
	--rdp-day_button-border-radius: 3px;
	--rdp-day_button-height: 30px;
	--rdp-day_button-width: 30px;

2). How do I target the background color of the date cell? For the single day picker, it is transparent with a border (see image) but I want the bg to be solid.

3). I would also like to ask if its possible to change the font-family and font-size of the date and month labels.

[rodgobbi]

@mrzamin could you share a CodeSandbox with the custom styles applied?

[mrzamin]

@mrzamin could you share a CodeSandbox with the custom styles applied?

thanks, here it is. my custon styles are at the very top of App.js:

if that link doesnt work heres another: https://codesandbox.io/p/sandbox/heuristic-framework-mm32dz