@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 dialog($theme) {
    @include css-vars($theme, '.igx-dialog');

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

    $dialog-min-width: map.get((
        'material': rem(280px),
        'fluent': rem(288px),
        'bootstrap': rem(288px),
    ), $variant);

    $dialog-title-padding: map.get((
        'material': pad-block(rem(16px)) pad-inline(rem(24px)) 0,
        'fluent': pad-block(rem(16px)) pad-inline(rem(24px)) pad-inline(rem(24px)),
        'bootstrap': pad(rem(16px)),
        'indigo': pad-block(rem(24px)) pad-inline(rem(24px)) 0,
    ), $variant);

    $dialog-message-padding: map.get((
        'material': pad-block(rem(14px)) pad-inline(rem(24px)),
        'fluent': 0 pad-inline(rem(24px)) pad-block(rem(20px)),
        'bootstrap': pad(rem(16px)),
        'indigo': pad-block(rem(16px)) pad-inline(rem(24px)),
    ), $variant);

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

    %igx-dialog-display {
        outline-style: none;
    }

    %igx-dialog--hidden {
        display: none;
    }

    %igx-dialog-window {
        position: relative;
        min-width: $dialog-min-width;
        border: rem(1px) solid var-get($theme, 'border-color');
        border-radius: var-get($theme, 'border-radius');
        background: var-get($theme, 'background');
        box-shadow: var-get($theme, 'elevation');
        overflow: hidden;

        .igx-calendar {
            min-width: rem(320px);
        }

        .igx-calendar--vertical {
            min-width: rem(496px);
        }
    }

    %igx-dialog-title {
        display: flex;
        color: var-get($theme, 'title-color');
        padding: $dialog-title-padding;

        @if $bootstrap-theme {
            border-bottom: rem(1px) solid var-get($theme, 'border-color');
        }
    }

    %igx-dialog-content {
        color: var-get($theme, 'message-color');
        padding: $dialog-message-padding;
        // The 2 rules below are related to https://github.com/IgniteUI/igniteui-angular/issues/11300
        position: relative;
        z-index: 0;
    }

    %igx-dialog-message {
        display: inline-block;
        max-width: 40ch;

        @media all and (-ms-high-contrast: none)
        {
            max-width: map.get((
                'material': 62ch,
                'fluent': 48ch,
                'bootstrap': 60ch,
                'indigo': 48ch,
            ), $variant);
        }
    }

    %igx-dialog-actions {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        padding: $dialog-actions-padding;
        gap: if($variant == 'indigo', rem(16px), rem(8px));

        @if $bootstrap-theme {
            border-top: rem(1px) solid var-get($theme, 'border-color');
        }

        @if $variant == 'indigo' {
            .igx-button {
                --ig-size: 2;
            }
        }
    }
}

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

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

    %igx-dialog-content {
        @include type-style($content) {
            margin: 0;
        }

        > * {
            letter-spacing: normal;
        }
    }
}