$split-pane-handle-size: .5em !default;
$split-pane-margin: $split-pane-handle-size;
$split-pane-color: #eee;
$split-pane-arrows-color: darken($split-pane-color,20%);

.split-panes {
  height: 100%;
  overflow: hidden;
  width: 100%;

}

%split-pane {
  float: left;
}

.split-panes-handle {
  @extend %split-pane;
  background-color: $split-pane-color;
  position: relative;

  &::before {
    color: $split-pane-arrows-color;
    font-family: FontAwesome;
    font-size: 1em;
    position: absolute;
    text-align: center;
  }
}

.split-panes-handle-height {
  &::before {
    content: "\f07d";
    left: 50%;
    top: -.5em;
  }
}

.split-panes-handle-width {
  &::before {
    content: "\f07e";
    left: -.25em;
    top: 25%;
  }
}

.split-pane {
  @extend %split-pane;
}

.split-pane-height {
  > .split-panes-handle {
    cursor: ns-resize;
    height: $split-pane-handle-size;
    width: 100%;
  }

  > .split-pane {
    min-width: 100%;
    height: 50%;
    width: inherit;
  }

  > .split-pane-first {
    margin-top: -$split-pane-margin;
    padding-top: $split-pane-margin;
  }

  > .split-pane-last {
    margin-bottom: -$split-pane-margin;
    padding-bottom: $split-pane-margin;
  }
}

.split-pane-width {
  > .split-panes-handle {
    cursor: ew-resize;
    width: $split-pane-handle-size;
    min-height: 100%;
  }

  > .split-pane {
    min-height: 100%;
    width: 50%;
  }

  > .split-pane-first {
    margin-left: -$split-pane-margin;
    padding-left: $split-pane-margin;
  }

  > .split-pane-last {
    margin-right: -$split-pane-margin;
    padding-right: $split-pane-margin;
  }
}

