@use 'sass:map';
@use '../../config';
@use '../../functions' as *;
@use '../../schemas/' as *;
@use '../../../utils/map' as *;
@use '../../../elevations/' as *;

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

/// Scrollbar Theme
///
/// This theme has no automatic token derivation. All tokens are independent.
/// Configure thumb, track, and corner elements separately.
///
/// @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
) {
    $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);

    @if not($sb-thumb-bg-color-hover) and $sb-thumb-bg-color {
        $sb-thumb-bg-color-hover: var(--sb-thumb-bg-color);
    }

    @if not($sb-track-bg-color-hover) and $sb-track-bg-color {
        $sb-track-bg-color-hover: var(--sb-track-bg-color);
    }

    @return extend(
        $theme,
        (
            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,
        )
    );
}