@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 bottom-nav($theme) {
    @include css-vars($theme);

    $variant: map.get($theme, '_meta', 'theme');
    $menu-height: rem(56px);
    $item-min-width: rem(80px);
    $item-max-width: rem(168px);
    $item-padding: 0 pad-inline(rem(12px, 16px));

    %igx-bottom-nav-panel {
        display: block;

        &:focus {
            outline-style: none;
        }

        &:empty {
            display: none;
        }
    }

    %igx-bottom-nav-menu {
        display: flex;
        position: fixed;
        justify-content: center;
        align-items: center;
        inset-inline-start: 0;
        inset-inline-end: 0;
        height: $menu-height;
        background: var-get($theme, 'background');
        border-top: rem(1px) solid var-get($theme, 'border-color');
        overflow: hidden;
        z-index: 8;
    }

    %igx-bottom-nav-menu--top {
        inset-block-start: 0;
        inset-block-end: inherit;
        box-shadow: var-get($theme, 'elevation');
    }

    %igx-bottom-nav-menu--bottom {
        inset-block-start: inherit;
        inset-block-end: 0;
        box-shadow: var-get($theme, 'elevation');
    }

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

        igx-icon {
            --component-size: 3;

            @if $variant == 'indigo' {
                --size: rem(16px);
            }
        }
    }

    %igx-bottom-nav-menu-item--disabled {
        @if $variant != 'indigo' {
            opacity: .5;
        }

        cursor: default;
        pointer-events: none;
    }

    %igx-bottom-nav-menu-item--selected {
        transition: color .15s $in-out-quad, opacity .25s $in-out-quad;
    }

    %igx-tab-label {
        @include ellipsis();

        color: var-get($theme, 'label-color');
        max-width: 100%;
        text-align: center;
        transform: translateZ(0);
        transition: transform .15s $in-out-quad;
        z-index: 1;
    }

    %igx-tab-label--disabled {
        color: var-get($theme, 'label-disabled-color');
    }

    %igx-tab-icon {
        display: flex;
        position: relative;
        justify-content: center;
        color: var-get($theme, 'icon-color');

        @if $variant != 'indigo' {
            padding: 0 pad-inline(rem(8px));
            height: rem(24px);
            transform: translateZ(0);
            transition: transform .15s $in-out-quad;
        }

        z-index: 1;
    }

    %igx-tab-icon--disabled {
        color: var-get($theme, 'icon-disabled-color');
    }

    %igx-tab-icon--selected {
        color: var-get($theme, 'icon-selected-color');

        inset-block-start: rem(-2px);
    }

    %igx-tab-label--selected {
        color: var-get($theme, 'label-selected-color');
    }

    @if $variant != 'indigo' {
        %igx-tab-icon--selected {
            transform: translateY(-2px);
        }

        %igx-tab-label--selected {
            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} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
@mixin bottom-nav-typography($categories: (label: 'caption')) {
    $label: map.get($categories, 'label');

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