::-webkit-scrollbar {
    --scrollbar-thickness: 0.8rem;

    width: var(--scrollbar-thickness);
    height: var(--scrollbar-thickness);
}

::-webkit-scrollbar-track {
    background-color: var(--color-bg-blue-dark);
    box-shadow: inset 0 0 0 2px var(--color-bg-blue-darker);
}

::-webkit-scrollbar-corner {
    background-color: var(--color-bg-blue-dark);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-action);
    border-radius: 0.5rem;
    border: 2px solid var(--color-bg-blue-dark);
}
::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--color-action), white);
}

/* firefox scrollbar styling */
* {
    scrollbar-color: var(--color-action) var(--color-bg-blue-dark);
    scrollbar-width: thin;
}