.Divider {

  &:hover {
    .divider-line {
      border-color: #5365EA;

      &:before {
        background: #5365EA;
      }
    }
  }

  .divider-line {
    margin: 0;
    height: 100%;
    width: 0;
    border: none;
    border-right: 1px solid transparent;
    border-color: #A7ADD0;

    &:before {
      content: '';
      position: absolute;
      border-top: 7px solid white;
      border-bottom: 7px solid white;
      background: #A7ADD0;
      z-index: 2;
      height: 26px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
    }
  }
}
.Divider.vertical {
  width: 100%;
  cursor: row-resize;
  .divider-line {
    height: 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    border-color: #A7ADD0;

    &:before {
      content: '';
      position: absolute;
      border: none;
      top: unset;
      border-left: 7px solid white;
      border-right: 7px solid white;
      background: #A7ADD0;
      z-index: 2;
      width: 26px;
      left: 50%;
      transform: translateX(-50%);
      height: 2px;
    }
  }
}

.Divider.horizontal {
  height: 100%;
  cursor: col-resize;
}