@import 'modules/app/viewports';

.app-body {
  display: flex;
  flex-direction: row;
  min-width: 320px;

  .drawer-container {
    width: 100%;

    .drawer-content {
      overflow: auto;
      display: grid;
      grid-template-rows: 60px calc(100vh - 120px) 60px;

      width: 100%;
      height: 100%;

      .mat-toolbar {
        width: 100%;
        height: 60px;
        margin: 0;
        padding: 0;

        .app-cmf-body-mobile-toolbar {
          display: flex;
          justify-content: space-between;

          width: 100%;
          height: 60px;

          color: #777;

          background-color: var(--app-toolbar-bg-color);
        }
      }

      .app-cmf-body-mobile-content {
        z-index: 10;

        overflow: hidden;
        display: flex;

        width: 100%;
        height: 100%;

        .app-cmf-body-mobile-content-simplebar {
          width: 100%;
        }
      }
    }
  }
}

::ng-deep {
  .app-cmf-body-mobile-content-simplebar {
    .simplebar-track.simplebar-vertical {
      display: none;
    }
  }
}

.app-body,
.app-navbar-container {
  min-height: 100%;
}