CSS滚动条样式难题

Question

我有一个带有CSS属性overflow: auto的容器。我知道如何给滚动条赋予样式，但我不明白如何才能：

1)将滚动条从容器的右边界向左移动至少5个像素。

2) scrollbar-thumb部分应该比scrollbar-track部分更好。

“SCSS”中的示例代码：

#msg-console {
    height: 48rem;
    width: 100%;
    background: #04aaf8;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    &::-webkit-scrollbar {
        width: 1rem;
    }

    &::-webkit-scrollbar-track {
        border-radius: 1rem;
        background: rgba(74, 49, 106, 0.9);
        width: 0.5rem;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        background: #fff;
        width: 0.3rem;
    }
}

有人能帮帮我吗？我只寻找CSS解决方案。