_m-scrollbar.scss

@use "m-hover";

/**
 * Scrollbar - Make an invisible scrollbar and custom the scrollbar color
 *
 * ALERT : Don't use this mixin neither on the html element, nor on the body element to avoid deteriorating the accessibility
 *
 * @author Milan Ricoul
 *
 * 1/ Invisible scrollbar
 *
 * Examples :
 *
 *      .my-scrollbar {
 *          @include scrollbar-invisible;
 *      }
 *
 * ------------------------------------------------------------------------
 *
 * 1/ Scrollbar color
 *
 * @param $size
 * @param $scrollbar-color
 * @param $track-color
 *
 * Examples :
 *
 *      .my-scrollbar-custom {
 *          @include scrollbar-color(10px, $color-primary, $color-dark);
 *      }
 *
 */

@mixin scrollbar-invisible {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    &::-webkit-scrollbar {
        display: none;
    }
}

@mixin scrollbar-color($size, $scrollbar-color, $track-color) {
    &::-webkit-scrollbar {
        display: none;
        width: $size;
        height: $size;
    }

    &::-webkit-scrollbar-thumb {
        background: $scrollbar-color;
        border-radius: 20px;
    }

    &::-webkit-scrollbar-track {
        background: $track-color;
        border-radius: 20px;
    }

    @include m-hover.hover {
        &::-webkit-scrollbar {
            display: block;
        }
    }
}