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

/// Column Hiding Theme
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Color} $title-color [primary 500]- The text color used for the title of the list.
/// @param {Color} $background-color [transparent] - The background color of the panel.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires text-contrast
///
/// @example scss Change the title color
///   $column-hiding-theme: igx-column-hiding-theme($title-color: black);
///   // Pass the theme to the igx-column-hiding component mixin
///   @include igx-column-hiding($column-hiding-theme);
////
@function igx-column-hiding-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $title-color: null,
    $background-color: null
) {
    $name: 'igx-column-hiding';
    $column-hiding-schema: ();

    @if map-has-key($schema, $name) {
        $column-hiding-schema: map-get($schema, $name);
    } @else {
        $column-hiding-schema: $schema;
    }

    $theme: apply-palette($column-hiding-schema, $palette);

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

    @return extend($theme, (
        name: $name,
        palette: $palette,
        title-color: $title-color,
        background-color: $background-color
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires rem
/// @requires --var
@mixin igx-column-hiding($theme) {
    @include igx-root-css-vars($theme);

    %column-hiding-display {
        display: flex;
        flex-flow: column nowrap;
        background: --var($theme, 'background-color');
        width: 100%;
        flex: 1 1 auto;
        min-width: rem(180px);
    }

    %column-hiding-title {
        color: --var($theme, 'title-color');
        margin: 0;
        padding: rem(16px) rem(16px) rem(8px);
    }

    %column-hiding-input {
        font-size: rem(16px) !important;
        margin: -16px 0 0 !important;
        padding: rem(8px) rem(16px);
    }

    %column-hiding-columns {
        display: flex;
        flex-flow: column nowrap;
        overflow-y: auto;
    }

    %column-hiding-item {
        padding: rem(16px);
        min-height: rem(52px);
    }

    %column-hiding-buttons {
        display: flex;
        justify-content: flex-end;
        padding: rem(8px) rem(16px);
    }
}

/// Adds typography styles for the igx-column-hiding component.
/// Uses the 'subtitle-1'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
/// @param {Map} $categories [(title: 'subtitle-1')] - The categories from the typographic scale used for type styles.
/// @requires {mixin} igx-type-style
@mixin igx-column-hiding-typography($type-scale, $categories: (title: 'subtitle-1')) {
    $title: map-get($categories, 'title');

    %column-hiding-title {
        @include igx-type-style($type-scale, $title) {
            margin: 0;
        }
    }
}