<div class="callout {{ color }}" [class.callout-highlight]="appearance === 'highlight'" [class.callout-more]="appearance === 'more'">
  @if (appearance === 'default') {
    <div class="callout-inner">
      <ng-container *ngTemplateOutlet="inner"></ng-container>
    </div>
  } @else {
    <ng-container *ngTemplateOutlet="inner"></ng-container>
  }
</div>

<ng-template #inner>
  @if (label) {
    <div class="callout-title">
      <it-icon [labelWaria]="labelWaria" [name]="iconName"></it-icon>
      @if (hiddenLabel) {
        <span class="visually-hidden">{{ hiddenLabel }}</span>
      }
      <span class="text">{{ label }}</span>
    </div>
  }
  <p class="callout-big-text">
    <ng-content select="[bigText]"></ng-content>
  </p>
  <ng-content></ng-content>
</ng-template>
