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

    $variant: map.get($theme, '_meta', 'theme');
    $drawer-icon-size: rem(24px);

    $aside-padding: map.get((
        'material': rem(8px),
        'fluent': 0,
        'bootstrap': rem(16px),
        'indigo': rem(8px),
    ), $variant);

    $item-padding: map.get((
        'material': pad-block(rem(12px)) pad-inline(rem(8px)),
        'fluent': pad-block(rem(10px)) pad-inline(rem(8px)),
        'bootstrap': pad-block(rem(8px)) pad-inline(rem(16px)),
        'indigo': pad-block(rem(8px)) pad-inline(rem(16px)),
    ), $variant);

    $item-gap: map.get((
        'material': rem(32px),
        'fluent': rem(8px),
        'bootstrap': rem(8px),
        'indigo': rem(16px),
    ), $variant);

    $item-min-height: map.get((
        'material': rem(48px),
        'fluent': rem(44px),
        'bootstrap': rem(40px),
        'indigo': rem(32px),
    ), $variant);

    $item-mini-size: map.get((
        'material': rem(56px),
        'fluent': rem(40px),
        'bootstrap': rem(88px),
        'indigo': rem(48px),
    ), $variant);

    %navdrawer-display {
        --ig-nav-drawer-size: #{rem(240px)};
        --ig-nav-drawer-size--mini: #{$item-mini-size};

        flex-basis: 0;
        transition: flex-basis;
        transition-duration: .3s;
        transition-timing-function: $out-quad;
        flex-shrink: 0;
    }

    %navdrawer-display-pinned {
        flex-basis: var(--ig-nav-drawer-size);
    }

    %navdrawer-display-mini-pinned {
        flex-basis: calc(var(--ig-mini-nav-drawer-size, #{$item-mini-size}) + rem(1px));
    }

    %aside {
        position: fixed;
        height: 100%;
        min-height: 100%;
        overflow-x: hidden;
        background: var-get($theme, 'background');
        inset: 0 auto;
        width: var(--ig-nav-drawer-size);
        inset-inline-start: 0;
        transition: width, padding, transform;
        transition-timing-function: $in-out-quad;
        box-shadow: var-get($theme, 'elevation');
        padding: $aside-padding;

        // additional popover overrides:
        margin: 0;
        border: none;
        display: block;

        @if $variant != 'fluent' {
            border-inline-end: rem(1px) solid var-get($theme, 'border-color');
        } @else {
            border: rem(1px) solid var-get($theme, 'border-color');
        }

        border-radius: var-get($theme, 'border-radius');
    }

    %aside-panning {
        overflow-x: hidden;
        transition: none;
    }

    %aside--pinned {
        position: relative;
        box-shadow: none;
    }

    %aside--collapsed--right {
        transform: translate3d(300px, 0, 0);
        box-shadow: none;

        [dir='rtl'] & {
            transform: translate3d(-300px, 0, 0);
        }
    }

    %igx-nav-drawer__aside--collapsed {
        transform: none;
        width: 0;
        overflow: hidden;
        border: none;
        padding: 0;
    }

    %aside--collapsed {
        transform: translate3d(-300px, 0, 0);

        [dir='rtl'] & {
            transform: translate3d(300px, 0, 0);
        }

        box-shadow: none;
    }

    %aside--right {
        inset-inline-start: auto;
        inset-inline-end: 0;
        border-inline-end: none;

        @if $variant != 'fluent' {
            border-inline-start: rem(1px) solid var-get($theme, 'border-color');
        }
    }

    %aside--mini {
        transition-duration: .3s;
        width: var(--ig-nav-drawer-size--mini);
        min-width: fit-content;

        %item {
            justify-content: center;
            min-width: fit-content;

            @if $variant == 'bootstrap' {
                width: rem(56px);
            }

            @if $variant == 'indigo' {
                width: rem(32px);

                // important is needed to override the typography margins
                margin: rem(4px) auto !important;
            }

            igx-icon {
                margin-inline-start: 0;
            }
        }
    }

    %aside--normal {
        transition-duration: .3s;
        width: var(--ig-nav-drawer-size);
    }

    %overlay {
        opacity: 1;
        background: color(null, 'gray', 500, .54);
        transition: opacity, visibility;
        transition-duration: .3s, .3s;
        transition-timing-function: ease-in, step-start;
        transition-delay: 0s, 0s;
        position: absolute;
        inset-inline-start: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        visibility: visible;

        // additional popover overrides:
        margin: 0;
        padding: 0;
        border: none;
        display: block;
    }

    %overlay-panning {
        transform: translate3d(0, 0, 0);
        transition: none;
    }

    %overlay--hidden {
        transition-timing-function: ease-in-out, step-end;
        visibility: hidden;
        opacity: 0;
    }

    %overlay-panning--hidden {
        /* must be visible during pan.. */
        visibility: visible;
    }

    %item {
        position: relative;
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        color: var-get($theme, 'item-text-color');
        max-height: $item-min-height;
        gap: $item-gap;
        padding: $item-padding;

        @if $variant == 'indigo' {
            margin-block-end: rem(4px) !important;
        }

        cursor: pointer;
        user-select: none;
        outline: transparent;
        white-space: nowrap;

        // For material the radius is on the after element
        @if $variant != 'material' {
            border-radius: var-get($theme, 'item-border-radius');
        }

        text-decoration: none;
        border: none;
        justify-content: flex-start;

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

            color: var-get($theme, 'item-icon-color');
        }

        // Need this to override the igx-buttons
        &[igxButton] {
            background: transparent;
            border: none;
        }

        &%igx-button--fab {
            min-height: auto;
        }

        &%igx-icon-button-display {
            height: auto;
            transition: none;
        }

        @if $variant == 'material' {
	        $reduce-size: rem(8px);

			// The clip path here fixes a bug: https://github.com/IgniteUI/igniteui-angular/issues/14554
	        clip-path: inset(calc($reduce-size / 2) 0 round var-get($theme, 'item-border-radius'));

            &::after {
                content: '';
                position: absolute;
                width: 100%;
                inset-block-start: rem(4px);
                inset-inline-start: 0;
                height: calc(100% - #{$reduce-size});
                border-radius: var-get($theme, 'item-border-radius');
                z-index: -1;
            }
        }

        &:hover,
        &:focus {
            @if $variant == 'material' {
                &::after {
                    background: var-get($theme, 'item-hover-background');
                }
            } @else {
                background: var-get($theme, 'item-hover-background');
            }

            color: var-get($theme, 'item-hover-text-color');
            box-shadow: none;

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

    %item--active {
        // should be app primary color
        color: var-get($theme, 'item-active-text-color');

        @if $variant == 'material' {
            &::after {
                background: var-get($theme, 'item-active-background');
            }
        } @else {
            background: var-get($theme, 'item-active-background');
        }


        igx-icon {
            color: var-get($theme, 'item-active-icon-color');
        }

        &:focus,
        &:hover {
            color: var-get($theme, 'item-active-text-color');

            @if $variant == 'material' {
                &::after {
                    background: var-get($theme, 'item-active-background');
                }
            } @else {
                background: var-get($theme, 'item-active-background');
            }

            igx-icon {
                color: var-get($theme, 'item-active-icon-color');
            }
        }
    }

    %item,
    %item--active {
        // Need this to override the igx-buttons
        &[igxButton] {
            box-shadow: none;

            igx-icon {
                width: var(--ig-icon-size, #{$drawer-icon-size});
                height: var(--ig-icon-size, #{$drawer-icon-size});
                font-size: var(--ig-icon-size, #{$drawer-icon-size});
                margin: 0;
            }

            &:hover,
            &:focus {
                box-shadow: none;
                border: none;
            }
        }
    }

    %item--header {
        display: flex;
        align-items: center;
        padding: $item-padding;
        min-height: $item-min-height;
        white-space: nowrap;
        color: var-get($theme, 'item-header-text-color');

        @if $variant == 'indigo' {
            margin-block-end: rem(4px) !important;
        }
    }

    %item--disabled {
        background: none;
        color: var-get($theme, 'item-disabled-text-color');
        cursor: default;
        pointer-events: none;

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

    %style-dummy {
        height: 0;
        background: none;
        box-shadow: none;
        transition: none;
        visibility: hidden;
    }

    %disable-animation {
        transition-duration: 0s;
    }
}

/// Adds typography styles for the igx-navdrawer component.
/// Uses the 'subtitle-1', 'subtitle-2'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(item: 'subtitle-2', header: 'subtitle-1')] - The categories from the typographic scale used for type styles.
@mixin navdrawer-typography(
    $categories: (
        item: 'subtitle-2',
        header: 'subtitle-1'
    )
) {
    $item: map.get($categories, 'item');
    $header: map.get($categories, 'header');

    %item {
        @include type-style($item);
    }

    %item--header {
        @include type-style($header) {
            margin: 0;
        }
    }
}