@layer components {
    .visible-scrollbar{
        &::-webkit-scrollbar {
            /*background-color: theme('colors.sui.bg');*/
            background-color: transparent;
            width:10px;
            height:10px;
        }
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
        &::-webkit-scrollbar-track:hover {
            background-color: rgba(0,0,0,0.1);
            border:2px solid theme('colors.sui.bg');
            border-radius: 11px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.5);
            border-radius: 11px;
            border:2px solid theme('colors.sui.bg');
        }
        &::-webkit-scrollbar-thumb:hover {
            background-color:#a0a0a5;
            border:2px solid theme('colors.sui.bg');
        }
        &::-webkit-scrollbar-button {
            display:none;
        }
    }

    .hide-scrollbar{
        &::-webkit-scrollbar {
            background-color: transparent;
            width:0px;
            height:0px;
        }
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
        &::-webkit-scrollbar-track:hover {
            background-color: transparent;
            border: none;
        }
        &::-webkit-scrollbar-thumb {
            background-color: transparent;
            border: none;
        }
        &::-webkit-scrollbar-thumb:hover {
            background-color: transparent;
            border: none;
        }
        &::-webkit-scrollbar-button {
            display:none;
        }
    }

    /*.slim-active-scrollbar{
        &::-webkit-scrollbar {
            !*background-color: theme('colors.sui.bg');*!
            background-color: transparent;
            width:3px;
            height:3px;
        }
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
        &::-webkit-scrollbar-track:hover {
            background-color: rgba(0,0,0,0.1);
            border: 1px solid theme('colors.sui.bg');
            border-radius: 2px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: transparent;
            !*background-color: rgba(0,0,0,0.5);*!
            border-radius: 2px;
            border:0px solid theme('colors.sui.bg');
        }
        &::-webkit-scrollbar-thumb:hover {
            background-color:#a0a0a5;
            border:1px solid theme('colors.sui.bg');
        }
        &::-webkit-scrollbar-button {
            display:none;
        }
        &:active {
            &::-webkit-scrollbar-thumb{
                background-color: rgba(0,0,0,0.5);
            }
        }
    }*/

    .lock-scroll{
        @apply overflow-hidden;
    }
}