<mat-select class="language-selector" [(ngModel)]="marketCountry" (selectionChange)="setMarketCountry($event)"
    [class.cy-flag-icon]="appLanguage==CYPRUS"
    [class.bg-flag-icon]="appLanguage==BULGARY"
    >
        <mat-option value="CYPRUS">
            <div class="cy-flag-icon flag-icon"></div>
        </mat-option>
        <mat-option value="BULGARY">
            <div class="bg-flag-icon flag-icon"></div>
        </mat-option>
    </mat-select>

mat-select {
    position: absolute;
    bottom: 1vh;
    right: 1vh;
    height: 6vh;
    width: 11.5vh;
    display:inline-block;
    vertical-align: middle;
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center;
}

mat-option {
    min-width: 10px !important;
}

.cy-flag-icon {
    background-image: url("/assets/images/login/flags/en.png");
}

.bg-flag-icon {
    background-image: url("/assets/images/login/flags/es.png");
}

.flag-icon {
    display:inline-block;
    vertical-align: middle;
    height:7vh;
    width:8vh;
    background-repeat:no-repeat;
    background-size: contain;
    background-position: center;
}