@mixin valo-splitpanel($primary-stylename : v-splitpanel, $include-additional-styles: contains($v-included-additional-styles, splitpanel)) {
  .#{$primary-stylename}-horizontal {
    @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: horizontal);
  }

  .#{$primary-stylename}-vertical {
    @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: vertical);
  }
  
  @if $include-additional-styles {
    .#{$primary-stylename}-horizontal.large {
      @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true, $orientation: horizontal);
    }
    
    .#{$primary-stylename}-vertical.large {
      @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true, $orientation: vertical);
    }
  }
}




@mixin valo-splitpanel-global ($primary-stylename : v-splitpanel) {
  .#{$primary-stylename}-vertical,
  .#{$primary-stylename}-horizontal {
    overflow: hidden;
    white-space: nowrap;
  }

  .#{$primary-stylename}-hsplitter {
    z-index: 100;
    cursor: e-resize;
    cursor: col-resize;
  }

  .#{$primary-stylename}-vsplitter {
    z-index: 100;
    cursor: s-resize;
    cursor: row-resize;
  }

  // Element which acts as the active dragging area
  .#{$primary-stylename}-hsplitter,
  .#{$primary-stylename}-vsplitter {
    &:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    div {
      width: inherit;
      height: inherit;
      overflow: hidden;
      position: relative;
    }
  }

  .#{$primary-stylename}-hsplitter div,
  .#{$primary-stylename}-vsplitter div {
    &:before {
      @include box-sizing(border-box);
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  .v-disabled [class$="splitter"] div {
    cursor: default;

    &:before {
      display: none;
    }
  }

  // Allow undefined/auto height for horizontal split

  .#{$primary-stylename}-horizontal > div {
    > .#{$primary-stylename}-second-container {
      position: static !important;
      display: inline-block;
      vertical-align: top;
    }

    > .#{$primary-stylename}-first-container {
      display: inline-block;
      vertical-align: top;
    }
  }
}




@mixin valo-splitpanel-style(
    $primary-stylename : v-splitpanel,
    $splitter-size: max(1px, first-number($v-border)),
    $splitter-active-size: round($v-unit-size/3),
    $splitter-handle-visible: false,
    $splitter-shadow: none,
    $orientation: vertical horizontal
  ) {

  $offset: round(($splitter-active-size - $splitter-size)/-2);

  @if contains($orientation, horizontal) {
    > div > .#{$primary-stylename}-hsplitter {
      width: $splitter-size;

      &:after {
        left: $offset;
        right: $offset;
      }

      div {
       &:before {
          @include valo-button-style($shadow: $splitter-shadow);
          height: auto;
          padding: 0;
          border-radius: 0;
          @include valo-gradient($color: $v-background-color, $direction: to right);
        }

        @if $splitter-handle-visible {
          &:after {
            @include valo-splitpanel-splitter-handle-style($horizontal: true);
          }
        }
      }
    }

    > div > .#{$primary-stylename}-second-container {
      margin-left: $splitter-size;
    }
  }

  @if contains($orientation, vertical) {
    > div > .#{$primary-stylename}-vsplitter {
      height: $splitter-size;

      &:after {
        top: $offset;
        bottom: $offset;
      }

      div {
       &:before {
          @include valo-button-style($shadow: $splitter-shadow);
          height: auto;
          padding: 0;
          border-radius: 0;
        }

        @if $splitter-handle-visible {
          &:after {
            @include valo-splitpanel-splitter-handle-style;
          }
        }
      }
    }
  }
}



@mixin valo-splitpanel-splitter-handle-style ($horizontal: false, $include-common: true) {
  @if $include-common {
    content: "";
    border: valo-border($strength: 0.6);
    $border-color: first-color(valo-border($strength: 1.2));
    border-top-color: $border-color;
    border-left-color: $border-color;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  @if $horizontal {
    width: 0;
    height: $v-unit-size;
    margin-left: first-number($v-border)*-1;
    margin-top: round(-$v-unit-size/2);
  } @else {
    width: $v-unit-size;
    height: 0;
    margin-left: round(-$v-unit-size/2);
    margin-top: first-number($v-border)*-1;
  }
}