<div class="ccf-app mat-app-background">
  <ccf-spinner-overlay [text]="(loadingMessage$ | async) ?? ''" [active]="(spinnerActive$ | async) ?? false">
  </ccf-spinner-overlay>
  <ccf-header
    [class.hide]="(header$ | async) === false"
    [logoTooltip]="(logoTooltip$ | async) ?? ''"
    [homeUrl]="(homeUrl$ | async) ?? ''"
    [loggedIn]="loggedIn"
    [loginDisabled]="(loginDisabled$ | async) ?? false"
    [baseRef]="(baseHref$ | async) ?? ''"
    *ngIf="(spinnerActive$ | async) === false"
  >
  </ccf-header>

  <ccf-drawer-container class="main-drawers" [class.header-hidden]="(header$ | async) === false">
    <ccf-drawer class="left-drawer" opened #left (stateChange)="filterbox.removeBox()">
      <div class="left-drawer-container">
        <div class="filter-data">
          <ccf-filters-popover
            [filters]="$any(data.filter$ | async)"
            [drawerExpanded]="right.expanded"
            (filtersChange)="data.updateFilter($event)"
            [technologyFilters]="(data.technologyFilterData$ | async) ?? []"
            [providerFilters]="(data.providerFilterData$ | async) ?? []"
            [spatialSearchFilters]="$any(selectableSearches$ | async)"
            (spatialSearchSelected)="setSelectedSearches($event)"
            (spatialSearchRemoved)="removeSpatialSearch($event)"
            #filterbox
          >
          </ccf-filters-popover>

          <div class="filter-text">
            <div class="sex filter-tag">
              Sex: <strong>{{ (data.filter$ | async)?.sex }}</strong>
            </div>
            <div class="age filter-tag">
              Age:
              <strong>
                {{ $any(data.filter$ | async)?.ageRange[0] }}-{{ $any(data.filter$ | async)?.ageRange[1] }}
              </strong>
            </div>
            <div class="bmi filter-tag">
              BMI:
              <strong>
                {{ $any(data.filter$ | async)?.bmiRange[0] }}-{{ $any(data.filter$ | async)?.bmiRange[1] }}
              </strong>
            </div>
          </div>
        </div>
        <ccf-button-toggle
          class="button-toggle-group"
          [menuOptions]="menuOptions"
          [enableTooltip]="true"
          [tooltips]="tooltips"
          [selectedItems]="selectedtoggleOptions"
          (selectionChange)="toggleSelection($event)"
        ></ccf-button-toggle>
        <div class="ontologies">
          <ccf-ontology-selection
            class="ontology-selection"
            [class.firefox]="isFirefox"
            *ngIf="isItemSelected('AS')"
            [showtoggle]="false"
            [treeModel]="(ontologyTreeModel$ | async)!"
            [termData]="(data.ontologyTermsFullData$ | async) ?? {}"
            [occurenceData]="(data.ontologyTermOccurencesData$ | async) ?? {}"
            placeholderText="Search anatomical structures..."
            (ontologySelection)="ontologySelected($any($event), 'anatomical-structures')"
            [header]="(header$ | async) ?? false"
          >
          </ccf-ontology-selection>
          <ccf-ontology-selection
            class="cell-type-selection"
            [class.firefox]="isFirefox"
            *ngIf="isItemSelected('CT')"
            [showtoggle]="false"
            [treeModel]="(cellTypeTreeModel$ | async)!"
            [termData]="(data.cellTypeTermsFullData$ | async) ?? {}"
            [occurenceData]="(data.cellTypeTermOccurencesData$ | async) ?? {}"
            placeholderText="Search cell types..."
            (ontologySelection)="ontologySelected($any($event), 'cell-type')"
            [header]="(header$ | async) ?? false"
          >
          </ccf-ontology-selection>
          <ccf-ontology-selection
            class="biomarker-selection"
            [class.firefox]="isFirefox"
            *ngIf="isItemSelected('B')"
            [showtoggle]="true"
            [treeModel]="(biomarkersTreeModel$ | async)!"
            [termData]="(data.biomarkerTermsFullData$ | async) ?? {}"
            [occurenceData]="(data.biomarkerTermOccurencesData$ | async) ?? {}"
            placeholderText="Search Biomarkers..."
            (ontologySelection)="ontologySelected($any($event), 'biomarkers')"
            [header]="(header$ | async) ?? false"
          >
          </ccf-ontology-selection>

          <div class="no-selection-notice" *ngIf="selectedtoggleOptions.length === 0">
            No anatomical structures, cell types, or biomarkers selected. Use the above AS, CT, and B buttons to view
            the registered listings.
          </div>
        </div>
        <ccf-drawer-toggle-button></ccf-drawer-toggle-button>
      </div>
    </ccf-drawer>
    <ccf-drawer class="right-drawer" position="end" opened #right (stateChange)="filterbox.removeBox()">
      <ccf-viewer class="portal-view" [class.opened]="viewerOpen" [url]="url" (closed)="viewerOpen = false">
      </ccf-viewer>

      <div class="drawer-icons">
        <div class="drawer-icons-left">
          <button
            class="button"
            (click)="filterbox.removeBox(); right.toggleExpanded()"
            [matTooltip]="right.expanded ? 'Exit Fullscreen' : 'Enter Fullscreen'"
          >
            <mat-icon class="icon">{{ right.expanded ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
          </button>
          <button
            class="scheme-toggle button"
            (click)="toggleScheme()"
            [matTooltip]="isLightTheme ? 'Enter Dark Mode' : 'Enter Light Mode'"
          >
            <mat-icon class="icon">{{ isLightTheme ? 'brightness_2' : 'brightness_5' }} </mat-icon>
          </button>
          <button class="button">
            <mat-icon class="refresh icon" (click)="reset(left, right, filterbox)" matTooltip="Reset View"
              >refresh
            </mat-icon>
          </button>
        </div>
        <ccf-info-button
          videoID="YAHJqvD3Q_8"
          infoTitle="HRA Exploration User Interface"
          [documentationUrl]="(baseHref$ | async) + 'assets/docs/README.md'"
          matTooltip="Open Info"
        >
        </ccf-info-button>
      </div>
      <ccf-results-browser
        [listResults]="(listResultsState.listResults$ | async) ?? []"
        [aggregateData]="(data.aggregateData$ | async) ?? []"
        [resultLabel]="selectionLabel"
        (listResultSelected)="listResultsState.selectListResult(asMutable($event))"
        (listResultDeselected)="listResultsState.deselectListResult(asMutable($event))"
        (linkClicked)="openiFrameViewer($event)"
        [highlighted]="(listResultsState.highlightedNodeId$ | async) ?? ''"
        (itemHovered)="listResultsState.highlightNode($event)"
        (itemUnhovered)="listResultsState.unHighlightNode()"
        [header]="(header$ | async) ?? false"
      >
      </ccf-results-browser>
      <ccf-drawer-toggle-button></ccf-drawer-toggle-button>
    </ccf-drawer>

    <ccf-drawer-content [class.header-hidden]="(header$ | async) === false">
      <div [class.closed]="!organListVisible" class="selector-drawer" [class.expanded]="selector.expanded">
        <ccf-organ-selector
          #selector
          class="organ-selector"
          [multiselect]="true"
          [occurenceData]="(data.ontologyTermOccurencesData$ | async) ?? {}"
          [organList]="$any(scene.referenceOrgans$ | async)"
          (organsChanged)="scene.setSelectedReferenceOrgans($event)"
          [selectedOrgans]="$any(scene.selectedReferenceOrgans$ | async)"
        >
        </ccf-organ-selector>
      </div>
      <div class="close-button-wrapper" [class.closed]="!organListVisible">
        <div *ngIf="organListVisible" class="close-button" (click)="selector.expanded = !selector.expanded">
          <mat-icon class="expand-collapse-icon" aria-hidden="false" aria-label="Expand carousel drawer">
            {{ selector.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}
          </mat-icon>
        </div>
        <div *ngIf="!selector.expanded" class="close-button" (click)="organListVisible = !organListVisible">
          <mat-icon class="expand-collapse-icon" aria-hidden="false" aria-label="Close carousel drawer">
            {{ organListVisible ? 'arrow_drop_up' : 'arrow_drop_down' }}
          </mat-icon>
        </div>
      </div>
      <ccf-run-spatial-search></ccf-run-spatial-search>
      <ccf-body-ui
        #bodyUI
        class="stage-content"
        [scene]="$any(scene.scene$ | async)"
        (nodeClick)="scene.sceneNodeClicked($event)"
        (nodeHoverStart)="scene.sceneNodeHovered($event)"
        (nodeHoverStop)="scene.sceneNodeUnhover()"
        [bounds]="{ x: 2.2, y: 2, z: 0.4 }"
        [class.expanded-stage]="!organListVisible"
        [class.selector-expanded]="selector.expanded"
      >
      </ccf-body-ui>
    </ccf-drawer-content>
  </ccf-drawer-container>
</div>

./app.component.scss

::ng-deep .cdk-overlay-container {
  position: absolute;
  font-size: 1.2rem;
}

:host {
  display: block;
  position: relative;
}

.ccf-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-size: 1rem;
  position: relative;
  text-align: left;

  ccf-header {
    z-index: 99;

    &.hide {
      display: none;
    }
  }

  ccf-drawer-container {
    height: calc(100% - 5rem);
    width: 100%;
    opacity: 1;
    overflow: hidden;
    transform: scale(1);

    &.header-hidden {
      height: 100%;
    }

    ccf-drawer {
      width: 28.5rem;

      div {
        .button-toggle-group {
          height: 4rem;
          display: flex;
          align-items: center;
        }
      }

      .drawer-icons {
        display: flex;
        padding-left: 1.5rem;
        height: 5rem;
        padding-right: 1.5rem;
        align-items: center;
        justify-content: space-between;

        .drawer-icons-left {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .button {
            padding: 0;
            border: none;
            cursor: pointer;
            outline: none;
            border-radius: 0.25rem;
            padding: 0.65rem;
            transition: 0.6s;
          }
        }
      }
    }

    ccf-drawer-content {
      overflow: hidden;
      border-radius: 0.5rem;
      height: calc(100vh - 4rem);

      .selector-drawer {
        top: 0rem;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: all 0.5s ease-in-out;
        height: 5rem;
        justify-content: flex-start;

        &.expanded {
          height: 15rem;
          overflow-y: auto;
        }

        &.closed {
          height: 1.5rem;
          top: -5rem;
        }
      }

      ccf-run-spatial-search {
        position: relative;
        float: right;
        height: 0px;
        z-index: 1;
        top: 1.5rem;
        right: 0.5rem;
      }

      .stage-content {
        transition: all 0.5s ease-in-out;
        border-bottom-right-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
      }

      .expanded-stage {
        height: calc(100% - 3rem);
      }

      .selector-expanded {
        height: calc(100% - 16.5rem);
      }

      &.header-hidden {
        height: calc(100vh - 1rem);
      }
    }

    .close-button-wrapper {
      display: flex;
      justify-content: center;
      border-top-right-radius: 0.5rem;
      border-top-left-radius: 0.5rem;
      height: 0;

      .close-button {
        display: flex;
        justify-content: center;
        height: 1.0625rem;
        width: 3rem;
        align-self: center;
        border-radius: 0rem 0rem 0.25rem 0.25rem;
        cursor: pointer;
        transition: 0.6s;
        position: relative;
        top: 0.5rem;
        z-index: 1;

        .mat-icon {
          position: relative;
          bottom: 0.2rem;
        }
      }
    }

    .left-drawer {
      padding-left: 1.5rem;
      padding-right: 1rem;

      .left-drawer-container {
        height: 100%;

        .ontologies {
          height: calc(100% - 9rem);
          display: flex;
          gap: 1.5rem;
          flex-direction: column;

          ccf-ontology-selection {
            flex: 1 1;
            overflow: auto;
            scrollbar-width: thin;
            &::-webkit-scrollbar {
              width: 0.25rem;
            }

            &.firefox {
              padding-right: 0.5rem;
            }

            &.biomarker-selection {
              flex-basis: 30%;
            }
          }

          .no-selection-notice {
            font-weight: 400;
            line-height: normal;
          }
        }
      }

      ::ng-deep .cff-drawer-inner-container {
        overflow: hidden;
      }

      .filter-data {
        height: 5rem;
        display: flex;
        align-items: center;

        .filter-text {
          display: flex;
          justify-content: space-between;
          width: 75%;
          margin-left: 1.5rem;

          .filter-tag {
            font-weight: 300;
            strong {
              font-weight: 600 !important;
            }
          }
        }
      }
    }
  }

  .right-drawer {
    .portal-view {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      right: 425%;
      height: calc(100% + -1.5rem);
      transform: translateX(-425%);
      width: calc(100% - 28.5rem);

      transition: transform 0.5s cubic-bezier(0.82, 0.085, 0.395, 0.895);

      &.opened {
        transform: translateX(0);
        transition: width 0s 0.5s;
      }
    }

    &:not(.ccf-drawer-opened) .portal-view {
      width: 100vw;

      &.opened {
        transition: width 0s;
      }
    }

    .shaded-toggle {
      box-shadow: -1px 0 4px #212121;
    }

    ::ng-deep .cff-drawer-inner-container {
      overflow: hidden;
    }
  }
}

::-webkit-scrollbar {
  width: 0.5rem;
}

::ng-deep .mdc-snackbar__surface {
  box-shadow: none !important;
}