pocketbase/ui/src/scss/_mixins.scss

@mixin hide() {
    opacity: 0;
    visibility: hidden;
}

@mixin show() {
    opacity: 1;
    visibility: visible;
}

@mixin shadowize($value...) {
    box-shadow: 0px 2px 5px 0px var(--shadowColor), $value;
}

@mixin scrollbar(
    $width: 8px,
    $thumbColor: var(--baseAlt2Color),
    $thumbActiveColor: var(--baseAlt3Color)
) {
    $trackColor: transparent;

    $elem: if(&, '&', '');

    @media screen and (min-width: 550px) {
        // chrome scrollbar styles
        #{$elem}::-webkit-scrollbar {
            width: $width;
            height: $width;
            border-radius: var(--baseRadius);
        }
        #{$elem}::-webkit-scrollbar-track {
            background: $trackColor;
            border-radius: var(--baseRadius);
        }
        #{$elem}::-webkit-scrollbar-thumb {
            background-color: $thumbColor;
            border-radius: 15px;
            border: 2px solid transparent;
            background-clip: padding-box;
            &:hover,
            &:active {
                background-color: $thumbActiveColor;
            }
        }

        @if & {
            // firefox scrollbar
            scrollbar-color: $thumbColor $trackColor;
            scrollbar-width: thin;
            scroll-behavior: smooth;
        } @else {
            html {
                // firefox scrollbar
                scrollbar-color: $thumbColor $trackColor;
                scrollbar-width: thin;
                scroll-behavior: smooth;

                * {
                    scrollbar-width: inherit;
                }
            }
        }
    }
}