.__scroll{
    --scroll-width: 8px;
    --scroll-height: 10px;

    --scroll-bg: #f6f6f6;
    --scroll-border: 1px solid #EDEDEDFF;

    --scroll-thumb-width: 6px;
    --scroll-thumb-height: 8px;

    --thumb-bg: #d9d8d8;
    --thumb-border: 1px solid #dcdcdc;

    padding-right: 2px;
    overflow: var(--overflow);
    height: var(--height);
    &::-webkit-scrollbar-thumb {
        background-color: var(--thumb-bg);
        border-radius: 5px;
        width: var(--scroll-thumb-width);
        height: var(--scroll-thumb-height);
        display: block;
        border: var(--thumb-border);
        transition: 200ms all;
        &:hover {
            background: var(--thumb-active-bg)!important;
        }
    }

    &::-webkit-scrollbar {
        background-color: var(--scroll-bg);
        border: var(--scroll-border);
        width: var(--scroll-width);
        height: var(--scroll-height);
        display: block;
        padding-left: 15px;
        transition: 500ms all;
        opacity: 100%;
        border-radius: 5px;
    }
    &.invisible{
        &::-webkit-scrollbar-thumb, &::-webkit-scrollbar {
            display: none!important;
        }
    }
}