@use 'sass:map';
@use '../../base' as *;

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

    $variant: map.get($theme, '_meta', 'theme');
    $width: rem(52px);
    $margin: rem(42px) auto;

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

    %igx-toast-display {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        // !important is needed to override the typography styles
        margin: $margin !important;
        padding: $padding;
        min-width: $width;
        color: var-get($theme, 'text-color');
        background: var-get($theme, 'background');
        border-radius: var-get($theme, 'border-radius');
        box-shadow: var-get($theme, 'elevation');
        backdrop-filter: blur(10px);

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
        }
    }
}

/// Adds typography styles for the igx-toast 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 toast-typography($categories: (text: 'body-2')) {
    $text: map.get($categories, 'text');

    %igx-toast-display,
    %igx-toast-display > *:not(igx-icon) {
        @include type-style($text) {
            margin: 0;
        }
    }
}