Transition does not work in mat-autocomplete in angular to have expandable search box

Question

I implemented search box with mat autocomplete angular material. But when I want to set animation for my search box, It does not work. I want That when I click on search Icon, It opens autocomplete search box . And when I click on search icon in search box or out of search box, It closes search box. my html/CSS code is:

 .hidden{
      display: none;
    }

    .active{
      width: 50%;
      -webkit-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out!important;
    }
    .search-icon {
      display: flex;
      padding: 10px 15px;
      width: 54px;
      height: 54px;
      border: 1px solid #E0E3EB;
      border-radius: 6px;
      font-size: 32px;
      transition: width 0.4s ease-in-out !important;
    }

    .right {
      float: right;
      transition: width 0.4s ease-in-out !important;
    }
    .cost-profit-search {
      display: inline-block;
      transition: width 0.4s ease-in-out !important;
    }

<button mat-icon-button class='right' (click)="openSearch()" [class.hidden]="toggleSearch">
      <mat-icon class="search-icon">search</mat-icon>
    </button>
    <div class="cost-profit-search">
      <mat-form-field class="symbol-search" style="width: 600px"  appearance = "legacy"                       [ngClass]="toggleSearch ? 'active' : 'hidden'">
        <input
          style="height: 5%; padding-right: 10px; width: 80%;"
          type="text"
          dir="rtl"
          placeholder="search..."
          matInput
          [formControl]="symbolListForm"
          [matAutocomplete]="symbolInput"
        />

        <mat-autocomplete #symbolInput="matAutocomplete" (optionSelected)="changeFilter($event)">
          <mat-option
            [ngClass]="toggleSearch ? 'active' : 'hidden'"
            *ngFor="let item of filteredSymbols | async"
            [value]="item"
          >
            {{ item }}
          </mat-option>
        </mat-autocomplete>
        <div style="float: left"><figure class="f-search-icon" *ngIf = "!turnCloseIcon" (click)="onSearchClicked()"></figure></div>
        <div style="float: left"><figure class="x-circle-icon" *ngIf = "turnCloseIcon" (click)="onSearchClear()"></figure></div>
      </mat-form-field>
    </div>

Any help would be appreciate.