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

/// If only background color is specified,
/// the idle item color will be assigned automatically to a contrasting color.
/// @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 background color used for the toast.
/// @param {Color} $idle-item-color [null] - The text-color used for the idle color.
/// @param {Color} $active-item-color [null] - The text-color used for the active color.
/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the bar.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires text-contrast
/// @requires igx-elevation
/// @requires $elevations
///
/// @example scss Set a custom background color
///   $my-tabbar-theme: igx-toast-theme($background: black);
///   // Pass the theme to the igx-bottom-nav component mixin
///   @include igx-bottom-nav($my-tabbar-theme);
@function igx-bottom-nav-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $elevations: $elevations,

    $background: null,
    $idle-item-color: null,
    $active-item-color: null,
    $shadow: null
) {
    $name: 'igx-bottom-nav';
    $bottom-nav-schema: ();

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

    $theme: apply-palette($bottom-nav-schema, $palette);

    @if not($idle-item-color) and $background {
        @if type-of($background) == 'color' {
            $idle-item-color: rgba(text-contrast($background), .7);
        }
    }

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

    @return extend($theme, (
        name: $name,
        palette: $palette,
        background: $background,
        idle-item-color: $idle-item-color,
        active-item-color: $active-item-color,
        shadow: $shadow
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires {mixin} ellipsis
/// @requires igx-bottom-nav-theme
/// @requires igx-color
/// @requires extend
/// @requires rem
/// @requires $ease-in-out-quad
/// @requires --var
@mixin igx-bottom-nav($theme) {
    @include igx-root-css-vars($theme);

    $menu-height: 56px;
    $item-min-width: 80px;
    $item-max-width: 168px;
    $item-padding: 0 rem(12px, 16px);

    %igx-tab-panel {
        display: none;
    }

    %igx-tab-panel--selected {
        display: block;
    }

    %igx-bottom-nav-menu {
        display: flex;
        position: fixed;
        justify-content: center;
        align-items: center;
        left: 0;
        right: 0;
        height: $menu-height;
        background: --var($theme, 'background');
        overflow: hidden;
        z-index: 8;
    }

    %igx-bottom-nav-menu--top {
        top: 0;
        bottom: inherit;
        box-shadow: --var($theme, 'shadow');
    }

    %igx-bottom-nav-menu--bottom {
        top: inherit;
        bottom: 0;
        box-shadow: --var($theme, 'shadow');
    }

    %igx-bottom-nav-menu-item {
        display: flex;
        position: relative;
        flex-flow: column nowrap;
        flex: 1;
        align-items: center;
        justify-content: center;
        min-width: $item-min-width;
        max-width: $item-max-width;
        height: 100%;
        color: --var($theme, 'idle-item-color');
        cursor: pointer;
        user-select: none;
        overflow: hidden;
        padding: $item-padding;
        -webkit-tap-highlight-color: transparent;
        outline: 0;
    }

    %igx-bottom-nav-menu-item--disabled {
        opacity: .5;
        cursor: default;
    }

    %igx-active-tab {
        color: --var($theme, 'active-item-color');
        transition: color .15s $ease-in-out-quad, opacity .25s $ease-in-out-quad;
    }

    %igx-tab-label {
        @include ellipsis();
        padding-top: 4px;
        max-width: 100%;
        text-align: center;
        transform: translateZ(0);
        transition: transform .15s $ease-in-out-quad;
        z-index: 1;
    }

    %igx-tab-icon {
        display: flex;
        position: relative;
        justify-content: center;
        height: 24px;
        padding: 0 8px;
        transform: translateZ(0);
        transition: transform .15s $ease-in-out-quad;
        z-index: 1;

        igx-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            padding: 1px;
        }
    }

    %igx-tab-icon--selected {
        @extend %igx-active-tab;
        transform: translateY(-2px);
    }

    %igx-tab-label--selected {
        @extend %igx-active-tab;
        transform: translateY(-2px) scale(1.166667);
    }
}

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

    %igx-tab-label {
        @include igx-type-style($type-scale, $label) {
            margin: 0
        }
    }
}