@mixin tangential-components-app_bar($theme) {

  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $appBar: map-get($theme, app-bar);
  $height: map-get($appBar, 'height');

  .tanj-app-bar-component {
    padding: 0;
    max-height: $height;
    min-height: $height;
    font-size: 24px;

    tanj-icon  {
      color: map-get($appBar, text);
    }

    &.mat-toolbar.mat-primary {
      background-color: map-get($appBar, background);
    }

    .tanj-app-bar-body, .tanj-app-bar-title-container {
      max-height: $height;
    }
    .tanj-app-title {
      font-family:  "Roboto", "Trebuchet MS", Arial, Helvetica, cursive;
      text-align: left;
      margin-left: .25em;
      font-size: 200%;
      a, a:visited, a:active {
        color: map-get($appBar, text);
        text-decoration: none;
        text-underline: none;
        cursor: pointer;
      }
      sup {
        font-size: 50%;
        margin-left: .25em;
      }
    }

    .tanj-app-bar-left-button {
      width: 1.5em;
      margin-right: .5em;
    }

    .tanj-inline-profile {
      margin-right: 1em;
    }
  }

}