:root {
    --scroll-thumb: #000;
    --scroll-width: 8px;
    --scroll-width-thin: 5px;
    /* --color-scroll-track: var(--color-text); */
    --color-scroll-track: var(--color-border, #000);
    --color-scroll-bg: var(--color-background);

    --color-scroll-thumb: var(--color-border);
    --color-scroll-thumb-body: var(--color-focus);
    --color-scroll-thumb-hover: var(--color-focus);
}


/*
.aside {

    position: relative;

    background-image: linear-gradient(90deg, var(--color-scroll-bg) 0%, var(--color-scroll-bg) 41%, var(--color-scroll-track, #000) 41%, var(--color-scroll-track) 59%, var(--color-scroll-bg) 59%, var(--color-scroll-bg) 1em);

    background-position: 100%;
}

*/


/* mozilla FF */
@-moz-document url-prefix() {
    body {
        scrollbar-width: thin;
        scrollbar-color: red var(--color-scroll-bg);
        scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-bg);

    }

    .aside,
    .scroll-content {
        scrollbar-width: thin;
        scrollbar-color: red var(--color-scroll-bg);
        scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-bg);
        scrollbar-color: var(--color-scroll-thumb) transparent;
    }


    .aside {

        position: relative;
        /*background-color:green; */

        background-image: linear-gradient(90deg, var(--color-scroll-bg) 0%, var(--color-scroll-bg) 41%, var(--color-scroll-track, #000) 41%, var(--color-scroll-track) 59%, var(--color-scroll-bg) 59%, var(--color-scroll-bg) 1em);

        background-position: calc(100% + 0px);
        background-size: 6px;
        background-repeat: no-repeat;


        /*
        &:before {
            content: '';
            position: absolute;
            width: 4px;
            height: 100%;
            right: -2px;
            background: red;
            z-index: 1000;
        }
            */

    }

}


.scroll-content {
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;


    &::selection {
        background-color: var(--color-text, #000);
        color: var(--code-bg);
    }

    &::-webkit-scrollbar {
        width: var(--scroll-width);
        height: var(--scroll-width);
        border-radius: 0.5em;
    }

    &::-webkit-scrollbar-thumb {
        background: var(--color-scroll-thumb);
        border-radius: 0.5em;
        outline: 2px solid var(--color-background);
    }

    &::-webkit-scrollbar-track {
        border-radius: 0.5em;
        background-color: transparent;
        //background-color: var(--color-background);
    }


    &::-webkit-scrollbar-corner {
        background-color: transparent;
    }
}





@media (min-width:1024px) {

    .scroll-content-ld:hover {
        height: 100%;
        max-height: 100vh;
        overflow-y: auto;

        &::selection {
            background-color: var(--color-text, #000);
            color: var(--code-bg);
        }

        &::-webkit-scrollbar {
            width: var(--scroll-width);
            height: var(--scroll-width);
            border-radius: 0.5em;
        }

        &::-webkit-scrollbar-thumb {
            /*background: var(--color-scroll-thumb);*/
            background: var(--color-focus);
            border-radius: 0.5em;
            outline: 4px solid var(--color-background);
            //outline: 5px solid green;
        }

        &::-webkit-scrollbar-track {
            border-radius: 0.5em;
            background-color: transparent;
            //background-color: var(--color-background);
        }


        &::-webkit-scrollbar-corner {
            background-color: transparent;
        }



    }
}







// color emphasis on thumb
.scroll-track-col {
    --color-scroll-thumb: var(--color-focus);
    //--color-scroll-bg: var(--color-focus);
}

.scroll-thumb-thin {
    --scroll-width: 6px;
    --color-scroll-thumb: var(--color-focus);
}


.scroll-track::-webkit-scrollbar {
    width: var(--scroll-width);
    height: var(--scroll-width);

    /*
    */

    background-image: linear-gradient(90deg, var(--color-scroll-bg) 0%, var(--color-scroll-bg) 41%, var(--color-scroll-track, #000) 41%, var(--color-scroll-track) 59%, var(--color-scroll-bg) 59%, var(--color-scroll-bg) 100%);

}


/** scrollbars */
/*
html {
    scrollbar-color:var(--color-scroll-thumb) var(--color-scroll-bg);
}
.scrollbar, textarea.txt-code, body, .scrollbar-neg {
    scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-bg);
}
*/




/*
.scrollbar::-webkit-scrollbar,
.scrollbar-neg::-webkit-scrollbar {
    width: var(--scroll-width);
    border-radius: 0.5em;
    background-image: linear-gradient(90deg, var(--color-scroll-bg) 0%, var(--color-scroll-bg) 41%, var(--color-scroll-track) 41%, var(--color-scroll-track) 59%, var(--color-scroll-bg) 59%, var(--color-scroll-bg) 100%);
}

.scrollbar::-webkit-scrollbar-thumb,
textarea.txt-code::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.scrollbar-neg::-webkit-scrollbar-thumb {
    background: var(--color-text);
    border-radius: 0.5em;
}

.scrollbar::-webkit-scrollbar-track,
textarea.txt-code::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.scrollbar-neg::-webkit-scrollbar-track {
    border-radius: 0.5em;
}
*/

/* hide track bg */
/*
.scroll-content-notrack::-webkit-scrollbar {
    background: transparent;
}



.scroll-content::-webkit-scrollbar-thumb {
    background-color: var(--color-scroll-thumb);
}

.scroll-content:hover::-webkit-scrollbar-thumb,
.scroll-content:focus::-webkit-scrollbar-thumb {
    background-color: var(--color-focus);
}
*/

/* show on hover */
/*

.scroll-content-hover:hover::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
}

body.scrollbar::-webkit-scrollbar-thumb ,
body.scroll-content::-webkit-scrollbar-thumb {
    background-color: var(--color-scroll-thumb-body)!important;
}
*/

.scroll-content-thin {
    --scroll-width: var(--scroll-width-thin);
}


.scroll-content-hover {
    --color-scroll-thumb: transparent;

    &:hover,
    &:focus {
        --color-scroll-thumb: var(--color-focus);
    }

}



/*
.scroll-content::-webkit-scrollbar-thumb {
  background: transparent;
}

.scroll-content .scroll-content::-webkit-scrollbar {
  width: var(--scroll-width);
  width: 5px;
  border-radius: 0.5em;
  background-image: none;
}

.scroll-content .scroll-content::-webkit-scrollbar-thumb {
  background: transparent;
}

*/