<div
  class="container"
  [ngStyle]="{
    'background-color': !model.isFirstSwitchedOn
      ? model.firstChoiceColor.unSelectedbackground
      : model.secondChoiceColor.unSelectedbackground
  }"
  *ngIf="model"
>
  <div *ngIf="animations" class="active" [@buttonState]="state"></div>
  <div
    class="first-wrapper"
    [ngStyle]="{
      'background-color':
        !animations && (model.isFirstSwitchedOn ? model.firstChoiceColor.selectedBackground : model.firstChoiceColor.unSelectedbackground),
      color: model.isFirstSwitchedOn ? model.firstChoiceColor.selectedText : model.firstChoiceColor.unSelectedText
    }"
    [ngClass]="{ selected: model.isFirstSwitchedOn }"
    (click)="switch('first')"
  >
    <ng-content select="[slot=firstSwitchIcon]"></ng-content>
    <span>{{ model.firstChoice }}</span>
  </div>

  <div
    class="second-wrapper"
    [ngStyle]="{
      'background-color':
        !animations &&
        (!model.isFirstSwitchedOn ? model.secondChoiceColor.selectedBackground : model.secondChoiceColor.unSelectedbackground),
      color: !model.isFirstSwitchedOn ? model.secondChoiceColor.selectedText : model.secondChoiceColor.unSelectedText
    }"
    [ngClass]="{ selected: !model.isFirstSwitchedOn }"
    (click)="switch('second')"
  >
    <ng-content select="[slot=secondSwitchIcon]"></ng-content>
    <span>{{ model.secondChoice }}</span>
  </div>
</div>
