Offset scrollbar from the border of a div - html

Question

Currently my scrollbar is stuck to the border of the div (which has an overflow: "scroll" property) and changing the margin or padding of the scrollbar doesn't do anything. The scrollbar also shouldn't be as tall as the div itself, like 80% of it, but changing the height of it also doesn't work.
Below are pictures of what I'm going for and what it looks like currently and also the CSS styles that are currently on the scrollbar:
.container::-webkit-scrollbar-track {
border-radius: 10px;
background-color: var(--white50);
}
.container::-webkit-scrollbar {
width: 12px;
background-color: transparent;
}
.container::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--white);
}

Answer 1

You can't move the position of the scrollbar, but you can create an inner container to show the scrollbar in it. So you can have padding you want.
.container {
height: 200px;
width: 300px;
overflow: hidden;
background-color: lightgray;
padding: 20px;
}
.inner-container {
background-color: lightgray;
overflow-y: scroll;
height: 100%;
}
.inner-container::-webkit-scrollbar-track {
border-radius: 10px;
background-color: lightsalmon;
}
.inner-container::-webkit-scrollbar {
width: 12px;
background-color: transparent;
}
.inner-container::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: white;
}
<div class="container">
<div class="inner-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo
eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam.
Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam.
</p>
</div>
</div>