////
/// @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>
////

/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
///
/// @param {Color} $background [null] - The navbar background color.
/// @param {Color} $text-color [null] - The navbar text color.
/// @param {box-shadow} $shadow [null] - The shadow of the navbar.
/// @param {Color} $idle-icon-color [null] - The navbar idle icon color.
/// @param {Color} $hover-icon-color [null] - The navbar hover icon color.
/// @param {Bool} $disable-shadow [true] - Sets the navbar shadow visibility.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires text-contrast
/// @requires igx-elevations
/// @requires $elevations
///
/// @example scss Change the background color
///   $my-navbar-theme: igx-navbar-theme($background: green);
///   // Pass the theme to the igx-navbar component mixin
///   @include igx-navbar($my-navbar-theme);
@function igx-navbar-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $elevations: $elevations,

    $background: null,
    $text-color: null,
    $shadow: null,
    $idle-icon-color: null,
    $hover-icon-color: null,
    $disable-shadow: false
) {
    $name: 'igx-navbar';
    $navbar-schema: ();

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

    $theme: apply-palette($navbar-schema, $palette);

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

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

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

    @if not($shadow) {
        $elevation: map-get($navbar-schema, 'elevation');
        $shadow: igx-elevation($elevations, $elevation);
    }

    @if $disable-shadow {
        $shadow: none;
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        background: $background,
        text-color: $text-color,
        idle-icon-color: $idle-icon-color,
        hover-icon-color: $hover-icon-color,
        shadow: $shadow
    ));
}

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

    $navbar-padding: 0 em(16px);
    $navbar-title-fz: em(18px, 16px);
    $navbar-title-lh: em(18px, 16px);
    $navbar-title-margin: 0;
    $left: if-ltr(left, right);

    %igx-navbar-display {
        display: flex;
        position: relative;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 56px;
        padding: $navbar-padding;
        background: --var($theme, 'background');
        color: --var($theme, 'text-color');
        box-shadow: --var($theme, 'shadow');
        z-index: 4;
    }

    %igx-navbar-title {
        margin: $navbar-title-margin;
    }

    %igx-navbar-bundle {
        display: flex;
        align-items: center;
        user-select: none;

        > * + * {
            margin-#{$left}: 16px;
        }
    }

    %igx-navbar-icon-display {
        igx-icon {
            cursor: pointer;
            color: --var($theme, 'idle-icon-color');
            transition: color .15s $ease-out-quad;

            &:hover {
                color: --var($theme, 'hover-icon-color');
            }
        }
    }

    igx-action-icon {
        display: flex;
        align-items: center;
    }
}

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

    %igx-navbar-title {
        @include igx-type-style($type-scale, $title);
    }
}