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

  $background : map-get($theme, background);
  $accent_500 : mat-color(map-get($theme, accent), 500);
  $error : mat-color(map-get($theme, warn));
  $warn : mat-color(map-get($theme, accent), 500);
  $info : #5fba7d;

  tanj-notification-bar {
    max-height : 0;
    min-height : 0;
    font-size  : 16px;
    position   : relative;
    text-align : center;
    display    : inline-block;
    z-index    : 1000;

    .tanj-notification-component {
      background-color : rgba(mat-color($background, background), 1);
      width            : 100%;
      min-width        : 100%;
      position         : absolute;
      display          : inline-block;
      left             : 0;
      .tanj-notification-body {
        margin-top    : .5em;
        margin-left   : 1em;
        margin-right  : 1em;
        border-radius : 2em;
        box-shadow    : .4em .4em .75em 0 rgba(0, 0, 0, 0.5);
      }

      .tanj-notification-message {
        margin-top    : .2em;
        margin-bottom : .2em;
        margin-left   : 2em;
      }
      .tanj-error {
        background-color : $error;
      }
      .tanj-warn {
        background-color : $warn;
      }
      .tanj-info {
        background-color : $info;
      }
      .tanj-dismiss-notification-button {
        margin-right   : .5em;
        vertical-align : bottom;
      }

    }

  }

}