@if (data.icon) {
    <div class="kbq-toast__icon-container layout-row layout-align-start-start">
        @if (data.icon === true) {
            @switch (data.style) {
                @case ('contrast') {
                    <i
                        kbq-icon="kbq-info-circle_16"
                        class="kbq-toast__icon"
                        [color]="$any(data.style)"
                        [ngClass]="data.iconClass"
                    ></i>
                }
                @case ('success') {
                    <i
                        kbq-icon="kbq-check-circle_16"
                        class="kbq-toast__icon"
                        [color]="$any(data.style)"
                        [ngClass]="data.iconClass"
                    ></i>
                }
                @case ('warning') {
                    <i
                        kbq-icon="kbq-exclamation-triangle_16"
                        class="kbq-toast__icon"
                        [color]="$any(data.style)"
                        [ngClass]="data.iconClass"
                    ></i>
                }
                @case ('error') {
                    <i
                        kbq-icon="kbq-exclamation-triangle_16"
                        class="kbq-toast__icon"
                        [color]="$any(data.style)"
                        [ngClass]="data.iconClass"
                    ></i>
                }
            }
        }
        @if (isTemplateRef(data.icon)) {
            <ng-container [ngTemplateOutlet]="$any(data.icon)" [ngTemplateOutletContext]="{ $implicit }" />
        }
    </div>
}

<div class="kbq-toast__container">
    @if (data.title) {
        <div kbq-title class="kbq-toast__title" [class.kbq-toast__title_with-content]="data.caption || data.content">
            @if (isTemplateRef(data.title)) {
                <ng-container [ngTemplateOutlet]="$any(data.title)" [ngTemplateOutletContext]="{ $implicit }" />
            }
            @if (!isTemplateRef(data.title)) {
                <p>{{ data.title }}</p>
            }
        </div>
    }

    @if (data.caption) {
        <div kbq-title [class.kbq-toast__text]="data.title" [class.kbq-toast__title]="!data.title">
            @if (isTemplateRef(data.caption)) {
                <ng-container [ngTemplateOutlet]="$any(data.caption)" [ngTemplateOutletContext]="{ $implicit }" />
            }
            @if (!isTemplateRef(data.caption)) {
                {{ data.caption }}
            }
        </div>
    }

    @if (data.content) {
        <div class="kbq-toast__content">
            @if (isTemplateRef(data.content)) {
                <ng-container [ngTemplateOutlet]="$any(data.content)" [ngTemplateOutletContext]="{ $implicit }" />
            }
            @if (!isTemplateRef(data.content)) {
                {{ data.content }}
            }
        </div>
    }

    @if (data.actions) {
        <div class="kbq-toast__actions">
            @if (isTemplateRef(data.actions)) {
                <ng-container [ngTemplateOutlet]="$any(data.actions)" [ngTemplateOutletContext]="{ $implicit }" />
            }
            @if (!isTemplateRef(data.actions)) {
                {{ data.actions }}
            }
        </div>
    }
</div>

@if (data.closeButton) {
    <div>
        @if (data.closeButton === true) {
            <i kbq-icon-button="kbq-xmark-s_16" kbq-toast-close-button (click)="close()"></i>
        }
        @if (isTemplateRef(data.closeButton)) {
            <ng-container [ngTemplateOutlet]="$any(data.closeButton)" [ngTemplateOutletContext]="{ $implicit }" />
        }
    </div>
}