@use 'sass:map';
@use '../../base' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin navbar($theme) {
    @include css-vars($theme);
    $variant: map.get($theme, '_meta', 'theme');

    $navbar-padding: rem(16px);
    $navbar-title-fz: rem(18px, 16px);
    $navbar-title-lh: rem(18px, 16px);

    %igx-navbar-display {
        display: flex;
        position: relative;
        flex-flow: row nowrap;
        align-items: center;
        gap: rem(16px);
        width: 100%;
        min-height: rem(56px);
        max-height: rem(128px);
        padding-inline: pad-inline($navbar-padding);
        background: var-get($theme, 'background');
        color: var-get($theme, 'text-color');
        box-shadow: var-get($theme, 'elevation');
        z-index: 4;
        overflow: hidden;
        border-bottom: rem(1px) solid var-get($theme, 'border-color');

        igx-avatar {
            --ig-size: 1;
        }

        @if $variant == 'material' {
            igx-input-group {
                --ig-size: 1;
            }

            .igx-icon-button,
            igc-icon-button {
                --ig-size: 2;
            }
        }

        @if $variant == 'bootstrap' {
            igc-input,
            igc-icon-button {
                --ig-size: 1;
            }

            [igxButton],
            igc-button,
            [igxIconButton],
            igx-input-group {
                --ig-size: 2;
            }
        }

        @if $variant == 'fluent' {
            igx-input-group {
                --ig-size: 2;
            }
        }

        @if $variant == 'indigo' {
            igx-avatar,
            igc-icon-button,
            [igxIconButton] {
                --ig-size: 2;
            }
        }
    }

    %igx-navbar-part {
        display: flex;
        align-items: center;
    }

    %igx-navbar-title {
        @include line-clamp(4, true, true);
        margin: 0;
        flex-grow: 1;
        user-select: text;
        display: flex;
        flex-direction: row;
    }

    %igx-navbar-left {
        &:not(:empty) {
            @if $variant != 'indigo' {
                margin-inline-end: rem(16px)
            }
        }
    }

    %igx-navbar-middle {
        flex-grow: 1;
    }

    %igx-navbar-right {
        gap: if($variant == 'indigo', rem(8px), rem(16px));
    }

    %igx-navbar-left,
    %igx-navbar-right {
        &:empty {
            display: none;
        }
    }

    %igx-navbar-left,
    %igx-navbar-middle,
    %igx-navbar-right {
        display: flex;
        align-items: center;

        @if $variant == 'indigo' {
            igc-icon-button,
            [igxIconButton] {
                padding: rem(6px);
            }
        }

        igx-icon,
        igc-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};

            cursor: pointer;
            user-select: none;
            transition: color .15s $out-quad;

            @if $variant == 'indigo' {
                width: auto;
                height: auto;
            }
        }

        > igx-icon,
        > igc-icon {
            color: var-get($theme, 'idle-icon-color');

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

    igx-navbar-action,
    [igxNavbarAction] {
        @extend %igx-navbar-part;
    }

    igx-navbar-title,
    [igxNavbarTitle] {
        @extend %igx-navbar-part;
        @extend %igx-navbar-title !optional;
    }
}

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

    %igx-navbar-title {
        @include type-style($title);
        margin-bottom: 0;
    }
}