.Root {
  position: relative;
  width: 100%;
  height: 100%;
}

.Container1 {
  position: absolute;
  overflow: hidden;
}

.Container2 {
  position: absolute;
  overflow: hidden;
}

.Divider {
  position: absolute;
  z-index: 9;
  user-select: none;

  display: flex;
  justify-content: center;
  align-items: center;

  &.is-horizontal {
    width: 6px;
    top: 0;
    bottom: 0;
    cursor: col-resize;

    .DividerBorder {
      width: 2px;
      height: 100%;
    }
  }

  &.is-vertical {
    height: 6px;
    left: 0;
    right: 0;
    cursor: row-resize;

    .DividerBorder {
      width: 100%;
      height: 2px;
    }
  }

  &:hover .DividerHighlight {
    background-color: white;
    opacity: 0.5;
  }
}

.DividerHighlight {
  position: absolute;
  width: 100%;
  height: 100%;
}

.DividerBorder {
  position: absolute;
  background-color: black;
}
