<mat-tab-group
  mat-align-tabs="start"
  [disableRipple]="true"
  [selectedIndex]="selectedIndex"
  [disablePagination]="true"
  class="organ-tabs"
>
  <mat-tab *ngFor="let tab of tabs">
    <ng-template mat-tab-label>
      <img [src]="tab.image" [alt]="tab.alt" class="organ-image" (click)="organName.emit(tab.name)" />
    </ng-template>
  </mat-tab>
</mat-tab-group>

<mat-select
  class="organ-select"
  panelClass="panelClass"
  [value]="tabs[selectedIndex]"
  disableOptionCentering
  hideSingleSelectionIndicator
  disableRipple
>
  <mat-option *ngFor="let tab of tabs" [value]="tab" class="mat-select-value-text" (click)="organName.emit(tab.name)">
    {{ tab.name }}
  </mat-option>
</mat-select>

./organ-tabs.component.scss

:host {
  .organ-tabs {
    padding-bottom: 2rem;
  }

  ::ng-deep .mat-mdc-tab {
    --mdc-secondary-navigation-tab-container-height: 10rem;
    opacity: 1;
    border-bottom: unset;
    min-width: 0 !important;
    padding: 0rem !important;
    position: relative;
    overflow: visible;
    border-radius: 0.25rem;
  }

  ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
  .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #444c65;
    height: 0.5rem;
  }

  .organ-image {
    mix-blend-mode: multiply;
  }

  ::ng-deep {
    .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
      background-color: rgba(0, 0, 0, 0.04);
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
    }
  }

  ::ng-deep .mat-ink-bar {
    display: none;
  }

  ::ng-deep .mat-tab-header {
    border-bottom: unset;
  }

  ::ng-deep .mat-tab-labels {
    display: block !important;
    padding-bottom: 0.5rem;
  }

  ::ng-deep {
    .mat-mdc-tab:hover .mdc-tab__ripple::before {
      display: none;
    }

    .mdc-tab--active::after,
    .mat-mdc-tab:hover::after {
      content: '';
      width: 100%;
      height: 0.4rem;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.031rem;
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
    }

    .mdc-tab--active::after {
      background-color: #444c65;
    }

    .mat-mdc-tab:not(.mdc-tab--active):hover::after {
      background-color: #c2cae5;
    }

    .organ-tabs .mdc-tab-indicator__content {
      display: none;
    }

    .mat-mdc-tab-labels {
      display: block;
    }

    .organ-tabs .mdc-tab {
      display: inline-flex;
    }
  }

  // organ select mobile styles
  .organ-select {
    display: none;
  }

  @media (max-width: 63rem) {
    display: flex;
    margin-bottom: 3.5rem;

    .organ-select {
      display: initial;
      max-width: 21rem;
      height: 2.5rem;
      font-weight: 400;
      font-size: 0.875rem;
      line-height: 1.5rem;
      letter-spacing: 0.005rem;
      color: #444c65;
      border: 1px solid #444c65;
      border-radius: 2px;

      ::ng-deep .mat-mdc-select-trigger {
        height: 100%;
        justify-content: space-between;
        padding: 0rem 1rem;

        .mat-select-value {
          width: unset;
        }
      }

      ::ng-deep .mat-select-arrow-wrapper {
        padding-left: 12px;
      }
    }

    .organ-tabs {
      display: none;
    }
  }

  @media (max-width: 26.75rem) {
    .organ-select {
      max-width: unset;
    }
  }
}

::ng-deep {
  .mat-mdc-option {
    --mat-option-label-text-size: 0.875rem;
    --mat-option-label-text-tracking: 0;
    --mat-option-label-text-color: #444c65;
  }

  .panelClass {
    position: relative;
    top: 1px;
  }

  .panelClass .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
    background-color: unset;
  }
}