<div class="toolbelt-options">

    <div class="view-mode" > 
        <div class="btn-group" role="group" *ngIf="viewOptions?.length > 0">
            <div class="view-button" [ngClass]="{'selected': viewMode=='GRID'}" (click)="selectView('GRID')" *ngIf="hasView('GRID')">
                <i class="fas fa-th" ></i>
            </div>
            <div class="view-button" [ngClass]="{'selected': viewMode=='LIST'}" (click)="selectView('LIST')" *ngIf="hasView('LIST')">
                <i class="fas fa-list"></i>
            </div>
            <div class="view-button" [ngClass]="{'selected': viewMode=='TABLE'}" (click)="selectView('TABLE')" [hidden]="!data?.tableAvailable" *ngIf="hasView('TABLE')">
                <i class="fas fa-list"></i>
            </div>
        </div>
    </div>

    <div class="filters">
        <div class="filter-toggle" (click)="openFilters()" *ngIf="useFilters">
            <i class="fas fa-filter"></i>.
            <span class="filter-toggler">{{ filterLabel }}</span>
        </div>

        <div class="systems-radio" *ngIf="data.systems?.length > 0">
            <label class="radio-inline" *ngFor="let system of data.systems; let i=index" [ngClass]="{'active': system.selected}"
                (click)="selectUnit(i)">
                <i class="far fa-circle" *ngIf="!system.selected"></i>
                <i class="far fa-dot-circle" *ngIf="system.selected"></i>
                <span>{{system.displayName}}</span>
            </label>
        </div>

        <div class="sort-select" *ngIf="data.sortOptions?.length > 0" placement="bottom-right" ngbDropdown>
            <div class="sort-toggle" id="sortSelect" ngbDropdownToggle>
                {{ sortByLabel }}
                <span class="sort-mode" [innerHTML]="sortMode"></span>
            </div>
            <div ngbDropdownMenu aria-labelledby="sortSelect">
                <button class="dropdown-item" *ngFor="let sort of displayedSorts; let i=index" (click)="selectSorting(i)">
                    <span [innerHTML]="sort.displayName"></span>
                </button>
            </div>
        </div>
    </div>
</div>

./sort-options.component.scss

@import "src/app/styles/helpers";
//@import "~bootstrap/scss/dropdown";

:host {
    width: 100%;
}

.toolbelt-options {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    @include media-breakpoint-up(md) {
        align-items: center;
    }
    
    .view-mode {
        color: #495A63;

        .view-button {
            position: relative;
            display: inline-block;
            border: 1px solid #e2e2e2;
            background-color: #f8f8f8;
            color: #808080;
            padding: calc-rem(3) calc-rem(5);
            cursor: pointer;

            i {
                @include font-size(20);
            }
        }

        .selected {
            background-color: white;
            color: $blue;
        }

    }

    .filters {
        display: flex;
        flex-direction: column;
        text-align: right;

        @include media-breakpoint-up(md) {
            flex-direction: row;
        }

        .filter-toggle {
            cursor: pointer;
            i {
                vertical-align: middle;
                color: $blue;
            }
            .filter-toggler {
                @include media-breakpoint-up(md) {
                    margin-right: calc-rem(15);
                }
            }
    
            @include media-breakpoint-up(lg) {
                display: none;
            }
        }
    
        .systems-radio {
            display: flex;
            user-select: none;
            align-items: center;
    
            @include media-breakpoint-up(md) {
                margin-right: calc-rem(20);
            }
    
            .radio-inline {
                margin-right: calc-rem(10);
                display: inline-block;
                margin-bottom: 0;
                cursor: pointer;
                user-select: none;
    
                &:hover {
                    color: $dark-blue;
                }

                &:last-child {
                    margin: 0;
                }
    
                &.active {
                    color: $blue;
                }
    
                i {
                    @include font-size(17);
                    margin-right: calc-rem(5);
                }
    
            }
        }
        .sort-select {
            .sort-toggle {
                cursor: pointer;
                .sort-mode { font-weight: 600; }
            }
            .dropdown-menu {
                padding: 0;
                background-color: $cool-grey;
                .dropdown-item {
                    padding: calc-rem(8) calc-rem(24);
                    @include font-size(14);
                    color: white;
                    &:hover {
                        background-color: $cool-grey;
                        color: $light-blue;
                        cursor: pointer;
                    }
                }
            }
        }
    }


}