.header, .navbar, .aside {
  background-color: light-dark(#f6f7f9, var(--mantine-color-dark-8));
}

.navbar, .aside {
  @media (max-width: $mantine-breakpoint-sm) {
    width: 350px;
  }
}

.aside {
  @media (max-width: $mantine-breakpoint-sm) {
    margin-top: 45px;
  }
}

.resizeHandle {
  width: 3px;
  cursor: col-resize;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;

  &:hover, &:active {
    width: 5px;
    background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-5))
  }
}