:root {
    --kfw-scrollbar-color: #27272a;
    --kfw-scrollbar-color-hover: #71717a;
}

[data-theme="dark"] {
    --kfw-scrollbar-color: #27272a;
    --kfw-scrollbar-color-hover: #71717a;
}

[data-theme="light"] {
    --kfw-scrollbar-color: #D4D4D8;
    --kfw-scrollbar-color-hover: #A1A1AA;
}

* {
    scrollbar-color: var(--kfw-scrollbar-color) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--kfw-scrollbar-color);
    border-radius: 0;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--kfw-scrollbar-color-hover);
    }

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