@import '../variables';

@mixin navigation-layout() {
  .content {
    overflow: hidden;
    background-color: mat-color($mat-gray, 400);
    .toolbar {
      background-color: mat-color($primary);
      color: rgba(255, 255, 255, 0.87);
      height: calc(#{$header-height} - 1rem);
      font-weight: 400;
      position: sticky;
      position: -webkit-sticky; /* For macOS/iOS Safari */
      top: 0; /* Sets the sticky toolbar to be on top */
      z-index: 2; /* Ensure that your app's content doesn't overlap the toolbar */
      box-shadow: 0 0.25rem 1px 1rem #424242;
      margin-bottom: 13px;
      .mat-icon-logo {
        color: initial;
        height: 5rem;
        width: 5rem;
        position: fixed;
        top: 0.625rem;
        left: calc(50% - 2.5rem);
      }
      .actions {
        font-size: mat-font-size($typography, subheading-1);
        font-weight: mat-font-weight($typography, subheading-1);
      }
    }
    .history-datepicker {
      position: absolute;
      right: 1em;
    }
  }
}