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

/// Grid Filtering Theme
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Color} $toggle-icon-color [null] - The idle toggle icon color.
/// @param {Color} $toggle-icon-hover-color [null] - The hover toggle icon color.
/// @param {Color} $toggle-icon-active-color [null] - The active toggle icon color.
/// @param {Color} $toggle-icon-filtered-color [null] - The filtered toggle icon color.
/// @param {Color} $toggle-background [null] - The idle toggle background color.
/// @param {Color} $toggle-hover-background [null] - The hover toggle background color.
/// @param {Color} $toggle-active-background [null] - The active toggle background color.
/// @param {Color} $toggle-filtered-background [null] - The filtered toggle background color.
/// @param {Color} $menu-background [null] - The idle menu background color.
/// @param {Color} $menu-text-color [null] - The idle menu text color.
/// @param {Color} $menu-button-text-color [null] - The menu button text color.
/// @param {Color} $menu-button-disabled-text-color [null] - The menu disabled button text color.
///
/// @requires extend
/// @requires igx-color
/// @requires igx-contrast-color
/// @requires text-contrast
///
/// @example scss Change the menu background color
///   $my-filtering-theme: igx-grid-filtering-theme(
///     $menu-background: black,
///     $menu-text-color: white
///   );
///   // Pass the theme to the igx-grid-filtering component mixin
///   @include igx-grid-filtering($my-filtering-theme);
@function igx-grid-filtering-theme(
    $palette: $default-palette,

    $toggle-icon-color: null,
    $toggle-icon-hover-color: null,
    $toggle-icon-active-color: null,
    $toggle-icon-filtered-color: null,
    $toggle-background: null,
    $toggle-hover-background: null,
    $toggle-active-background: null,
    $toggle-filtered-background: null,

    $menu-background: null,
    $menu-text-color: null,
    $menu-button-text-color: null,
    $menu-button-disabled-text-color: null
) {
    $default-theme: (
        name: 'igx-grid-filtering',
        toggle-icon-color: inherit,
        toggle-icon-hover-color: #fff,
        toggle-icon-active-color: igx-contrast-color($palette, 'secondary'),
        toggle-icon-filtered-color: igx-color($palette, 'secondary'),
        toggle-hover-background: igx-color($palette, 'grays', 300),
        toggle-active-background: igx-color($palette, 'secondary'),
        toggle-filtered-background: transparent,
        menu-background: #fff,
        menu-text-color: igx-color($palette, 'grays', 900),
        menu-button-text-color: igx-color($palette, 'secondary')
    );

    @if not($menu-text-color) and $menu-background {
        $menu-text-color: text-contrast($menu-background);
    }

    @if not($menu-button-text-color) and $menu-background {
        $menu-button-text-color: rgba(text-contrast($menu-background), .24);
    }

    @if not($menu-button-disabled-text-color) and $menu-background {
        $menu-button-disabled-text-color: rgba(text-contrast($menu-background), .3)
    }

    @if not($toggle-icon-active-color) and $toggle-active-background {
        $toggle-icon-active-color: text-contrast($toggle-active-background)
    }

    @return extend($default-theme, (
        palette: $palette,

        toggle-icon-color: $toggle-icon-color,
        toggle-icon-hover-color: $toggle-icon-hover-color,
        toggle-icon-active-color: $toggle-icon-active-color,
        toggle-icon-filtered-color: $toggle-icon-filtered-color,
        toggle-background: $toggle-background,
        toggle-hover-background: $toggle-hover-background,
        toggle-active-background: $toggle-active-background,
        toggle-filtered-background: $toggle-filtered-background,

        menu-background: $menu-background,
        menu-text-color: $menu-text-color,
        menu-button-text-color: $menu-button-text-color,
        menu-button-disabled-text-color: $menu-button-disabled-text-color
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires igx-button-theme
/// @requires {mixin} igx-button
/// @requires igx-color
/// @requires igx-contrast-color
/// @requires igx-elevation
/// @requires $elevations
/// @requires rem
/// @requires --var
@mixin igx-grid-filtering($theme) {
    @include igx-root-css-vars($theme);

    $palette: map-get($theme, 'palette');

    $grid-filtering-options-padding: rem(8px, 16px);
    $grid-head-icon-size: rem(15px);
    $grid-head-icon-lh: rem(15px);
    $grid-head-icon-padding: rem(4.5px);

    $filtering-menu-min-width: 240px;
    $filtering-menu-shadow: igx-elevation($elevations, 8);
    $filtering-menu-radius: 4px;
    $filtering-menu-distance-to-toggle: 24px;

    %igx-filtering-display {
        position: static;
    }

    %igx-filtering-icon {
        cursor: pointer;
        color: --var($theme, 'toggle-icon-color');

        igx-icon {
            font-size: $grid-head-icon-size !important;
            line-height: $grid-head-icon-lh;
            padding: $grid-head-icon-padding;
            font-weight: 400;
        }
    }

    %igx-filtering-icon--active {
        color: --var($theme, 'toggle-icon-active-color');
    }

    %igx-filtering-icon--filtered {
        color: --var($theme, 'toggle-icon-filtered-color');
    }

    %igx-filtering-toggle {
        @extend %igx-filtering-icon;

        user-select: none;
        background: --var($theme, 'toggle-background');
        border-radius: 50%;
    }

    %igx-filtering-toggle--hover {
        background: --var($theme, 'toggle-hover-background');
    }

    %igx-filtering-toggle--active {
        @extend %igx-filtering-icon;
        @extend %igx-filtering-icon--active;

        background: --var($theme, 'toggle-active-background');
    }

    %igx-filtering-toggle--filtered {
        @extend %igx-filtering-icon;
        @extend %igx-filtering-icon--filtered;

        background: --var($theme, 'toggle-filtered-background');
    }

    %igx-filtering-menu {
        display: block;
        position: absolute;
        font-size: initial;
        font-weight: initial;

        min-width: $filtering-menu-min-width;
        user-select: none;
        background: --var($theme, 'menu-background');
        color: --var($theme, 'menu-text-color');
        margin-top: $filtering-menu-distance-to-toggle;

        box-shadow: $filtering-menu-shadow;
        border: 1px solid --var($theme, 'menu-background');
        border-radius: $filtering-menu-radius;
        padding: $grid-filtering-options-padding;
        z-index: 10;

        @include igx-button(igx-button-theme(
            $flat-text-color: --var($theme, 'menu-button-text-color'),
            $flat-hover-text-color: --var($theme, 'menu-button-text-color'),
            $flat-hover-background: --var($theme, 'menu-button-text-color'),
            $flat-focus-text-color: --var($theme, 'menu-button-text-color'),
            $flat-focus-background: --var($theme, 'menu-button-text-color'),
            $disabled-color: --var($theme, 'menu-button-disabled-text-color'),
            $disabled-background: transparent
        ));

        // TODO: remove after SELECT theme is created
        select {
            width: 100%;<commit_msg>fix(themes): button background and text have the same color<commit_after>////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank"><NAME></a>
/// @author <a href="https://github.com/desig9stein" target="_blank"><NAME></a>
////

/// Grid Filtering Theme
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Color} $toggle-icon-color [null] - The idle toggle icon color.
/// @param {Color} $toggle-icon-hover-color [null] - The hover toggle icon color.
/// @param {Color} $toggle-icon-active-color [null] - The active toggle icon color.
/// @param {Color} $toggle-icon-filtered-color [null] - The filtered toggle icon color.
/// @param {Color} $toggle-background [null] - The idle toggle background color.
/// @param {Color} $toggle-hover-background [null] - The hover toggle background color.
/// @param {Color} $toggle-active-background [null] - The active toggle background color.
/// @param {Color} $toggle-filtered-background [null] - The filtered toggle background color.
/// @param {Color} $menu-background [null] - The idle menu background color.
/// @param {Color} $menu-text-color [null] - The idle menu text color.
/// @param {Color} $menu-button-text-color [null] - The menu button text color.
/// @param {Color} $menu-button-disabled-text-color [null] - The menu disabled button text color.
///
/// @requires extend
/// @requires igx-color
/// @requires igx-contrast-color
/// @requires text-contrast
///
/// @example scss Change the menu background color
///   $my-filtering-theme: igx-grid-filtering-theme(
///     $menu-background: black,
///     $menu-text-color: white
///   );
///   // Pass the theme to the igx-grid-filtering component mixin
///   @include igx-grid-filtering($my-filtering-theme);
@function igx-grid-filtering-theme(
    $palette: $default-palette,

    $toggle-icon-color: null,
    $toggle-icon-hover-color: null,
    $toggle-icon-active-color: null,
    $toggle-icon-filtered-color: null,
    $toggle-background: null,
    $toggle-hover-background: null,
    $toggle-active-background: null,
    $toggle-filtered-background: null,

    $menu-background: null,
    $menu-text-color: null,
    $menu-button-text-color: null,
    $menu-button-disabled-text-color: null
) {
    $default-theme: (
        name: 'igx-grid-filtering',
        toggle-icon-color: inherit,
        toggle-icon-hover-color: #fff,
        toggle-icon-active-color: igx-contrast-color($palette, 'secondary'),
        toggle-icon-filtered-color: igx-color($palette, 'secondary'),
        toggle-hover-background: igx-color($palette, 'grays', 300),
        toggle-active-background: igx-color($palette, 'secondary'),
        toggle-filtered-background: transparent,
        menu-background: #fff,
        menu-text-color: igx-color($palette, 'grays', 900),
        menu-button-text-color: igx-color($palette, 'secondary')
    );

    @if not($menu-text-color) and $menu-background {
        $menu-text-color: text-contrast($menu-background);
    }

    @if not($menu-button-text-color) and $menu-background {
        $menu-button-text-color: rgba(text-contrast($menu-background), .24);
    }

    @if not($menu-button-disabled-text-color) and $menu-background {
        $menu-button-disabled-text-color: rgba(text-contrast($menu-background), .3)
    }

    @if not($toggle-icon-active-color) and $toggle-active-background {
        $toggle-icon-active-color: text-contrast($toggle-active-background)
    }

    @return extend($default-theme, (
        palette: $palette,

        toggle-icon-color: $toggle-icon-color,
        toggle-icon-hover-color: $toggle-icon-hover-color,
        toggle-icon-active-color: $toggle-icon-active-color,
        toggle-icon-filtered-color: $toggle-icon-filtered-color,
        toggle-background: $toggle-background,
        toggle-hover-background: $toggle-hover-background,
        toggle-active-background: $toggle-active-background,
        toggle-filtered-background: $toggle-filtered-background,

        menu-background: $menu-background,
        menu-text-color: $menu-text-color,
        menu-button-text-color: $menu-button-text-color,
        menu-button-disabled-text-color: $menu-button-disabled-text-color
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires igx-button-theme
/// @requires {mixin} igx-button
/// @requires igx-color
/// @requires igx-contrast-color
/// @requires igx-elevation
/// @requires $elevations
/// @requires rem
/// @requires --var
@mixin igx-grid-filtering($theme) {
    @include igx-root-css-vars($theme);

    $palette: map-get($theme, 'palette');

    $grid-filtering-options-padding: rem(8px, 16px);
    $grid-head-icon-size: rem(15px);
    $grid-head-icon-lh: rem(15px);
    $grid-head-icon-padding: rem(4.5px);

    $filtering-menu-min-width: 240px;
    $filtering-menu-shadow: igx-elevation($elevations, 8);
    $filtering-menu-radius: 4px;
    $filtering-menu-distance-to-toggle: 24px;

    %igx-filtering-display {
        position: static;
    }

    %igx-filtering-icon {
        cursor: pointer;
        color: --var($theme, 'toggle-icon-color');

        igx-icon {
            font-size: $grid-head-icon-size !important;
            line-height: $grid-head-icon-lh;
            padding: $grid-head-icon-padding;
            font-weight: 400;
        }
    }

    %igx-filtering-icon--active {
        color: --var($theme, 'toggle-icon-active-color');
    }

    %igx-filtering-icon--filtered {
        color: --var($theme, 'toggle-icon-filtered-color');
    }

    %igx-filtering-toggle {
        @extend %igx-filtering-icon;

        user-select: none;
        background: --var($theme, 'toggle-background');
        border-radius: 50%;
    }

    %igx-filtering-toggle--hover {
        background: --var($theme, 'toggle-hover-background');
    }

    %igx-filtering-toggle--active {
        @extend %igx-filtering-icon;
        @extend %igx-filtering-icon--active;

        background: --var($theme, 'toggle-active-background');
    }

    %igx-filtering-toggle--filtered {
        @extend %igx-filtering-icon;
        @extend %igx-filtering-icon--filtered;

        background: --var($theme, 'toggle-filtered-background');
    }

    %igx-filtering-menu {
        display: block;
        position: absolute;
        font-size: initial;
        font-weight: initial;

        min-width: $filtering-menu-min-width;
        user-select: none;
        background: --var($theme, 'menu-background');
        color: --var($theme, 'menu-text-color');
        margin-top: $filtering-menu-distance-to-toggle;

        box-shadow: $filtering-menu-shadow;
        border: 1px solid --var($theme, 'menu-background');
        border-radius: $filtering-menu-radius;
        padding: $grid-filtering-options-padding;
        z-index: 10;

        @include igx-button(igx-button-theme(
            $flat-text-color: --var($theme, 'menu-button-text-color'),
            $disabled-color: --var($theme, 'menu-button-disabled-text-color'),
            $disabled-background: transparent
        ));

        // TODO: remove after SELECT theme is created
        select {
            width: 100%;
{'fraction_non_alphanumeric': 0.16474966170500677, 'fraction_numerical': 0.005006765899864682, 'mean_word_length': 2.6650136374907016, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4627852', 'n_tokens_mistral': 4803, 'n_tokens_neox': 4591, 'n_words': 915}