@mixin scrollable($top: false, $bottom: false) {

    @if $top and $shadows {
        undershoot.top {
            background: linear-gradient(to bottom, $shadow-color, transparent, transparent, transparent, transparent, transparent);
        }
    }

    @if $bottom and $shadows {
        undershoot.bottom {
            background: linear-gradient(to top, $shadow-color, transparent, transparent, transparent, transparent, transparent);
        }
    }

    scrollbar,
    scrollbar * {
        all: unset;
    }

    scrollbar.vertical {
        transition: $transition;
        background-color: transparentize($bg, 0.7);

        &:hover {
            background-color: transparentize($bg, 0.3);

            slider {
                background-color: transparentize($fg, 0.3);
                min-width: .6em;
            }
        }
    }


    scrollbar.vertical slider {
        background-color: transparentize($fg, 0.5);
        border-radius: $radius;
        min-width: .4em;
        min-height: 2em;
        transition: $transition;
    }
}