.ResizePanel {
  width: 100%;
  bottom: 0px;
  flex-grow: 0;
  flex-shrink: 0;
  border-top: 1px solid lightgrey;
  touch-action: none;
  box-shadow: rgb(0 0 0 / 12%) 0px -20px 20px;
  z-index: 0; /* otherwise the box shadow is not visible on top of the code for some reason */
  transition: box-shadow 500ms;
}
.ResizePanel.dragging {
  box-shadow: rgb(0 0 0 / 22%) 0px -20px 20px;
}
.ResizePanel .notch-container {
  height: 20px;
  margin-top: -10px;
  margin-bottom: -10px;
  background: transparent;
  display: flex;
  z-index: 10;
  align-items: center;
  place-content: center;
  touch-action: none;
  user-select: none;
}
.ResizePanel .notch {
  cursor: row-resize;
  width: 110px;
  height: 15px;
  border-radius: 8px;
  background: white;
  border: 2px solid lightgray;
  z-index: 10;
  overflow: hidden;
  display: flex;
  justify-content: center;
  touch-action: none;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 17%);
  transition: all 250ms;
}
.ResizePanel.dragging .notch {
  background: #eeeeee;
}
.ResizePanel .notch .dots {
  text-align: center;
  margin-top: -12px;
  color: grey;
  font-size: 18px;
  touch-action: none;
}
