@charset "UTF-8";

// @description
// * scroll mixin.
// * Customize the styling of the scrollbar in the browser.

// @access public

// @version 1.2.0

// @author Khaled Mohamed

// @license MIT

// @repository: https://github.com/Black-Axis/sass-pire

// @reference 1: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

// @reference 2: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

// @reference 3: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-thumb

// @namespace general

// @module general/scroll

// @dependencies:
// * - meta.type-of (SASS function).

// @param {Number} $widthScrollbar
// * Width of the scrollbar in rem units.

// @param {Number} $borderRadiusScrollbar
// * Border radius of the scrollbar in rem units.

// @param {Color} $bgColorScrollbar
// * Background color of the scrollbar.

// @param {Color} $bgColorThumb
// * Background color of the scroll thumb.

// @param {Number} $borderRadiusThumb
// * Border radius of the scroll thumb in rem units.

// @param {Color} $bgColorTrack
// * Background color of the scroll track.

// @param {Boolean} $bxShadow
// * Whether to include a box shadow on the scrollbar track.

// @example
// * Use this mixin with a free in the abstract or base file.
// * See example.
// *   @include scroll(
// *     $widthScrollbar: 0.3,
// *     $borderRadiusScrollbar: 0.2,
// *     $bgColorScrollbar: #f0f0f0,
// *     $bgColorThumb: #333333,
// *     $borderRadiusThumb: 0.2,
// *     $bgColorTrack: #e0e0e0,
// *     $bxShadow: false
// *   );
// * }

// @output
// * body {
// *   overflow-x: hidden;
// * }

// * body::-webkit-scrollbar {
// *   width: 0.3rem;
// *   border-radius: 0.2rem;
// *   background-color: #f0f0f0;
// * }

// * body::-webkit-scrollbar-track {
// *   box-shadow: none;
// *   background-color: #e0e0e0;
// * }

// * body::-webkit-scrollbar-thumb {
// *   background-color: #333333;
// *   border-radius: 0.2rem;
// * }

@use "sass:meta";

@mixin scroll(
    $widthScrollbar: 0.4,
    $borderRadiusScrollbar: 0.3,
    $bgColorScrollbar: rgb(255, 255, 255),
    $bgColorThumb: rgb(99, 99, 99),
    $borderRadiusThumb: 0.3,
    $bgColorTrack: transparent,
    $bxShadow: true
) {
    $max-width-scroll: 0.7;
    $max-border-radius-scroll: 0.7;
    $max-border-radius-thumb: 0.7;

    // * Scrollbar width.
    @if meta.type-of($widthScrollbar) != number {
        @error "Width of the scrollbar must be in number type.";
    }

    @if $widthScrollbar <= 0 {
        @error "Width of scrollbar can not be smaller than or equal to 0.";
    } @else if $widthScrollbar >= $max-width-scroll {
        @warn "Width of scrollbar should be between to 0.1 and 0.6 maximum.";
    }

    // * Scrollbar border radius.
    @if meta.type-of($borderRadiusScrollbar) != number {
        @error "Width of the scrollbar must be in number type.";
    }

    @if $borderRadiusScrollbar <= 0 {
        @error "Border radius of scrollbar can not be smaller than or equal to 0.";
    } @else if $borderRadiusScrollbar >= $max-border-radius-scroll {
        @warn "Border radius of scrollbar should be between to 0.1 and 0.6 maximum.";
    }

    // * Scroll thumb border radius.
    @if meta.type-of($borderRadiusThumb) != number {
        @error "Width of the scrollbar must be in number type.";
    }

    @if $borderRadiusThumb <= 0 {
        @error "Border radius of scroll thumb can not be smaller than or equal to 0.";
    } @else if $borderRadiusThumb >= $max-border-radius-thumb {
        @warn "Border radius of scroll thumb should be between to 0.1 and 0.6 maximum.";
    }

    // * Scroll thumb background.
    @if meta.type-of($bgColorScrollbar) != color {
        @error "Background color of scroll bar must be in color type.";
    }

    @if meta.type-of($bgColorThumb) != color {
        @error "Background color of scroll thumb must be in color type.";
    }

    @if meta.type-of($bgColorTrack) != color {
        @error "Background color of scroll track must be in color type.";
    }

    @if meta.type-of($bxShadow) != bool {
        @error "Box shadow value in scroll mixin must be in boolean type.";
    }

    body {
        overflow-x: hidden;

        &::-webkit-scrollbar {
            width: #{$widthScrollbar}rem;
            border-radius: #{$borderRadiusScrollbar}rem;
            background-color: $bgColorScrollbar;
        }

        &::-webkit-scrollbar-track {
            @if $bxShadow == true {
                box-shadow: 0 0 6px #a8a8a8;
                background-color: transparent;
            } @else {
                box-shadow: none;
                background-color: $bgColorTrack;
            }
        }

        &::-webkit-scrollbar-thumb {
            background-color: $bgColorThumb;
            border-radius: #{$borderRadiusThumb}rem;
        }
    }
}