sidepanel scss

where in the scss code is the code that generates css for the side panel ? i am a little confused , if i wanted to change the size of the side panel , like in this code

#side-panel {
right: -800px;
width: 800px;
}

.side-panel-left #side-panel {
left: -800px;
right: auto;
}

#side-panel .side-panel-wrap {
width: 800px;
}

#side-panel .widget {
margin-top: 40px;
padding-top: 40px;
width: 720px;
border-top: 1px solid #E5E5E5;
}

.side-push-panel.side-panel-open.stretched #wrapper,
.side-push-panel.side-panel-open.stretched .sticky-header .container {
right: 400px;
}

.side-push-panel.side-panel-open.stretched.device-xl .slider-inner,
.side-push-panel.side-panel-open.stretched.device-lg .slider-inner {
left: -400px;
}

.side-panel-left.side-push-panel.side-panel-open.stretched #wrapper,
.side-panel-left.side-push-panel.side-panel-open.stretched .sticky-header .container,
.side-panel-left.side-push-panel.side-panel-open.stretched .slider-inner {
left: 400px;
right: auto;
}

would i just change. $side-panel-size : 300px in _variables.scss ?

// Side Panel
$side-panel-bg : var(--#{$cnvs-prefix}contrast-100);
$side-panel-size : 300px;
$side-panel-padding : 50px 70px 50px 40px;
$side-panel-overlay : rgba(black, 0.6);
$side-panel-widget-padding : 40px;
$side-panel-close-icon : url("images/icons/close.png");