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

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin snackbar($theme) {
    @include css-vars($theme);
    @include fade-in();

    $variant: map.get($theme, '_meta', 'theme');

    $snackbar-min-height: rem(48px);
    $snackbar-padding: pad-block(rem(7px)) pad-inline(rem(24px));

    %igx-snackbar-display {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        min-height: $snackbar-min-height;
        padding: $snackbar-padding;
        margin: rem(8px);
        gap: rem(24px);
        color: var-get($theme, 'text-color');
        background: var-get($theme, 'background');
        backface-visibility: hidden;
        box-shadow: var-get($theme, 'elevation');
        border-radius: var-get($theme, 'border-radius');
        backdrop-filter: blur(8px);

        [igxButton] {
            @include animation(fade-in .35s ease-out);

            --ig-size: 2;
            background: transparent;
            color: var-get($theme, 'button-color');
            -webkit-tap-highlight-color: transparent;
            box-shadow: none;
        }

        @if $variant == 'indigo' {
            padding: pad-block(rem(4px)) pad-inline(rem(16px));
            min-height: rem(36px);
        }
    }

    %igx-snackbar-button {
        display: contents;
    }

    %igx-snackbar-message {
        @include animation(fade-in .35s ease-out);
    }
}

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

    %igx-snackbar-message {
        @include type-style($text);
    }
}