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

  $background : map-get($theme, background);
  $foreground : map-get($theme, foreground);
  $accent_500 : mat-color(map-get($theme, accent), 500);
  $bottomNav: map-get($theme, bottom-nav);
  $height : map-get($bottomNav, 'height');

  .tanj-bottom-nav-component {
    z-index          : 500;
    font-size        : 24px;
    padding          : 0;
    max-height       : $height;
    min-height       : $height;
    background-color : map-get($background, background);
    box-shadow       : -.1em -.1em .1em .1em rgba(0, 0, 0, 0.1);

    span {
      font-size : 12px;
    }

    .tanj-nav-button {
      font-size : 24px;
      width     : 100%;
      .tanj-nav-button-icon {

      }
      .tanj-nav-button-label {
        font-size : 12px;
      }
    }
  }

}