Styling scrollbar with CSS

[Thyringer]

I'm trying to give all the app's scrollbars a specific design using CSS. I have achieved everything as desired so far; but I still haven't figured out how to make 'handle' the same width as the top and bottom scroll buttons. How do you do that?

CSS code (format string literal in Python / PySide2):

scrollbar_design = f"""
	QScrollBar {{
		background: #D3D3D3;
		border: none;
		margin: 0;
		padding: 0;
		width: 30px;
	}}
	
	QScrollBar:groove {{
		border-radius: 5px;
		background: gray;
		margin: 25px 0;
		width: 30px;
	}}
	
	QScrollBar:handle {{
		border: none;
		background: #D3D3D3;
		margin: 25px 0;
		min-height: 30px;
		min-width: 30px;
	}}
		
	QScrollBar:sub-line {{
		background: #F29100;
		border: none;
		height: 30px;
		padding: 0;
		width: 30px;
	}}
	
	/*
	QScrollBar:sub-line:vertical {{
		border-image: url({window.catalog.icon.control["up.png"]});
	}}
	*/
	
	QScrollBar:add-line {{
		background:  #F29100;
		border: none;
		height: 30px;	
		padding: 0;
		width: 30px;
	}}
	
	/*
	QScrollBar:add-line:vertical {{
		border-image: url({window.catalog.icon.control["expand.png"]});
	}}
	*/
"""

I commented out the code for the arrow images and only included it for the sake of completeness.

The first picture shows the desired design, the bottom shows my actual implementation.

[Thyringer]

Thanks for the answer!
the groove doesn't belong there anyway, and was deleted. I just "played" with it to see what kind of effects it had.

I found the problem myself: Another global widget's properties were interfering with my scrollbar's.

[Ewan Green]

QScrollBar::groove and QScrollBar::handle both have 25px horizontal padding. You don't want that if you're trying to make your scroll bar flush with the scroll buttons.

[Thyringer]

Thanks for the answer!
the groove doesn't belong there anyway, and was deleted. I just "played" with it to see what kind of effects it had.

I found the problem myself: Another global widget's properties were interfering with my scrollbar's.