$topBarHeight: 84px;

.component {
  background: var(--theme-main-body-background-color);
  height: 100%;
  display: flex;
}

.main {
  box-shadow: -20px 0 80px 0 rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  // Show elements that overflow the main above the sidebar area
  z-index: 20;
}

.sidebar {
  flex: 0;
  overflow: visible;
}

.topbar {
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  // Show elements that overflow the topbar above the content area
  z-index: 20;
}

.contentWrapper {
  flex: 1;
  overflow-x: hidden;
  overflow-y: overlay;
  position: relative;
  &::-webkit-scrollbar-button {
    height: 7px;
    display: block;
  }
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.component {
  background: var(--theme-main-body-background-color);
  height: 100%;
  display: flex;
}

.main {
  box-shadow: -20px 0 80px 0 rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  // Show elements that overflow the main above the sidebar area
  z-index: 20;
}

.sidebar {
  flex: 0;
  overflow: visible;
}

.topbar {
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  // Show elements that overflow the topbar above the content area
  z-index: 20;
}

.contentWrapper {
  flex: 1;
  overflow-x: hidden;
  overflow-y: overlay;
  position: relative;
  &::-webkit-scrollbar-button {
    height: 7px;
    display: block;
  }
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Remove unnecessary variable in topbar style
[DDW-648] Remove unnecessary variable in topbar style
