@use 'sass:map';
@use 'sass:meta';
@use '../../base' as *;
@use '../../themes/schemas' as *;

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
/// @param {Color} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {String | Number} $sb-size [null] - The size of the scrollbar.
/// @param {String | Number} $sb-thumb-min-height [null] - The min-height of the thumb.
/// @param {Color} $sb-thumb-bg-color [null] - The background color of the thumb.
/// @param {Color} $sb-thumb-bg-color-hover [null] - The :hover background color of the thumb.
/// @param {Color} $sb-thumb-border-color [null] - The border color of the thumb.
/// @param {String | Number} $sb-thumb-border-size [null] - The border size of the thumb.
/// @param {String | Number} $sb-thumb-border-radius [null] - The border radius of the thumb.
/// @param {Color} $sb-track-bg-color [null] - The background color of the track.
/// @param {Color} $sb-track-bg-color-hover [null] - The :hover background color of the track.
/// @param {Color} $sb-track-border-color [null] - The border color of the track.
/// @param {String | Number} $sb-track-border-size [null] - The border size of the track.
/// @param {Color} $sb-corner-bg [null] - The background color of the corner.
/// @param {Color} $sb-corner-border-color [null] - The border color of the corner.
/// @param {String | Number} $sb-corner-border-size [null] - The border size of the corner.
/// @requires $light-material-schema
/// @example scss Change the background and track colors
///   $my-scrollbar-theme: scrollbar-theme($sb-thumb-bg-color: black, $sb-track-bg-color: gray);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-scrollbar-theme);
@function scrollbar-theme(
    $schema: $light-material-schema,
    $sb-size: null,

    $sb-thumb-min-height: null,
    $sb-thumb-bg-color: null,
    $sb-thumb-bg-color-hover: null,
    $sb-thumb-border-size: null,
    $sb-thumb-border-color: null,
    $sb-thumb-border-radius: null,

    $sb-track-bg-color: null,
    $sb-track-bg-color-hover: null,
    $sb-track-border-color: null,
    $sb-track-border-size: null,

    $sb-corner-bg: null,
    $sb-corner-border-color: null,
    $sb-corner-border-size: null,
) {
    $name: 'ig-scrollbar';
    $selector: '.ig-scrollbar';
    $scrollbar-schema: ();

    @if map.has-key($schema, 'scrollbar') {
        $scrollbar-schema: map.get($schema, 'scrollbar');
    } @else {
        $scrollbar-schema: $schema;
    }

    $theme: digest-schema($scrollbar-schema);

    @return extend($theme, (
        name: $name,
        selector: $selector,

        sb-thumb-min-height: $sb-thumb-min-height,
        sb-thumb-bg-color: $sb-thumb-bg-color,
        sb-thumb-bg-color-hover: $sb-thumb-bg-color-hover,
        sb-thumb-border-size: $sb-thumb-border-size,
        sb-thumb-border-color: $sb-thumb-border-color,
        sb-thumb-border-radius: $sb-thumb-border-radius,

        sb-track-bg-color: $sb-track-bg-color,
        sb-track-bg-color-hover: $sb-track-bg-color-hover,
        sb-track-border-color: $sb-track-border-color,
        sb-track-border-size: $sb-track-border-size,

        sb-corner-bg: $sb-corner-bg,
        sb-corner-border-color: $sb-corner-border-color,
        sb-corner-border-size: $sb-corner-border-size,
        theme: map.get($schema, '_meta', 'theme'),
    ));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin scrollbar($theme) {
    @include css-vars($theme);

    %scrollbar-display {
        // The @-moz-document rule is specifically for Firefox because it does not support the WebKit pseudo-selectors for scrollbar styling.
        /* stylelint-disable-next-line at-rule-no-vendor-prefix */
        @-moz-document url-prefix() {
            scrollbar-width: var-get($theme, 'sb-size');
            scrollbar-color: var-get($theme, 'sb-thumb-bg-color') var-get($theme, 'sb-track-bg-color');
        }

        ::-webkit-scrollbar {
            @if meta.type-of(map.get($theme, 'sb-size') == 'string') {
                width: var-get($theme, 'sb-size');
                height: var-get($theme, 'sb-size');
            }
        }

        ::-webkit-scrollbar-track {
            background: var-get($theme, 'sb-track-bg-color');
        }

        ::-webkit-scrollbar-track:hover,
        ::-webkit-scrollbar-track:active {
            background: var-get($theme, 'sb-track-bg-color-hover');
        }

        ::-webkit-scrollbar-thumb {
            min-height: var-get($theme, 'sb-thumb-min-height');
            border-radius: var-get($theme, 'sb-thumb-border-radius');
            border: var-get($theme, 'sb-thumb-border-size') solid var-get($theme, 'sb-thumb-border-color');
            background-clip: content-box;
            background-color: var-get($theme, 'sb-thumb-bg-color');
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: var-get($theme, 'sb-thumb-bg-color-hover');
        }

        ::-webkit-scrollbar-corner {
            background: var-get($theme, 'sb-corner-bg');
            border: var-get($theme, 'sb-corner-border-size') solid var-get($theme, 'sb-corner-border-color');
        }

        ::-webkit-scrollbar-track-piece {
            border: var-get($theme, 'sb-track-border-size') solid var-get($theme, 'sb-track-border-color');
        }
    }

    @media (hover: none) {
        %scrollbar-display ::-webkit-scrollbar {
            width: auto;
            height: auto;
        }
    }
}