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

  tanj-side-nav-menu {
    box-sizing      : border-box;
    display         : flex;
    flex            : 1;
    flex-direction  : column;
    justify-content : flex-start;
    align-items     : flex-start;
    button.mat-button {
      text-align : left;
    }
  }

  .tanj-side-nav-menu-hero-container {
    position   : relative;
    width      : 100%;
    min-height : 25vh;

  }

  .tanj-side-nav-menu-hero-background {
    position         : absolute;
    z-index          : 10;
    width            : 100%;
    height           : 100%;
    background-image : url("/assets/images/nav-menu-background-640-00005.jpeg");
  }

  .tanj-side-nav-menu-hero-content {
    position         : absolute;
    z-index          : 12;
    width            : 100%;
    height           : 100%;
    background-color : rgba(black, .25);
    color            : rgba(white, 95);

    .tanj-visitor-display-name {
      width       : 50em;
      overflow    : hidden;
      margin-left : 1em;
    }

    .tanj-visitor-username {
      width         : 50em;
      overflow      : hidden;
      margin-left   : 1em;
      margin-bottom : .5em;
    }

  }

  .tanj-side-nav-content {
    width      : 100%;

    .tanj-fading-line {
      margin-top    : .5em;
      margin-bottom : .5em;
    }

  }

}