.app-bar{
    z-index: 5;
    @include display-flex;
    min-height: $mobileToolbarHeight;
    padding: 0 rem(8);
    background-color: $backgroundColorPrimary;
    color: $textColorPimary;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;

    @include breakpoint($breakpoint-m) {
        min-height: $tabletToolbarHeight;
        padding: 0 rem(16);
    }

}

.app-bar-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 56px);
    font-size: rem(24);
    font-weight: $fontWeightNormal;
    line-height: $mobileToolbarHeight;

    @include breakpoint($breakpoint-m) {
        line-height: $tabletToolbarHeight;
    }
}

.app-bar-main{
    @include flex(1, 1, auto);
    box-sizing: border-box;
    min-height: $mobileToolbarHeight;
    padding: 0 $mobileGutter;
    @include breakpoint($breakpoint-m) {
        min-height: $tabletToolbarHeight;
        padding: 0 $tabletGutter;
    }
}

.app-bar-icon-left, .app-bar-icon-right{
    align-self: center;
    .font-icon, .flat-button {
        color: $textColorPimary;
    }
    .flat-button {
        border: none;
        padding: rem(8) 0;
    }
}