/*!
 * jQuery Enhanced Splitter Plugin
 * LESS / CSS File
 * Version 1.2.3
 *
 * https://github.com/hiltonjanfield/jquery.enhsplitter
 *
 * All classes to begin with 'splitter'.
 * Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
 * Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
 *
 * Do not make changes to the CSS file; edit the LESS file and compile.
 */

@splitter_color: silver;
@splitter_highlight: #eeeeee;
@splitter_shadow: #666666;
@handle_color: #999999;
@handle_hover: #666666;
@handle_active: black;
@splitter_size: 7px;
@handle_size: 50px;

.splitter_container {
  position: relative;
  overflow: hidden;
  /* Using !important to ensure random, generalized styles do not interfere with the layout. */
  padding: 0 !important;
  height: 100%;

  > .splitter_panel {
    position: absolute;
    overflow: auto;
    padding: 0;
    margin: 0;

    > :not(.splitter_container) {
      overflow: auto;
      height: 100%;
    }
  }

  &.splitter-horizontal {
    > .splitter_panel {
      left: 0;
      width: 100%;
    }

    > .splitter_panel:first-child {
      /* Top panel */
      top: 0;
    }

    > .splitter_panel ~ .splitter_panel {
      /* Bottom panel */
      bottom: 0;
    }

  }

  &.splitter-vertical {
    > .splitter_panel {
      top: 0;
      height: 100%;
    }

    > .splitter_panel:first-child {
      /* Left panel */
      left: 0;
    }

    > .splitter_panel ~ .splitter_panel {
      /* Right panel */
      right: 0;
    }

  }

  &.splitter-fixed > .splitter_bar {
    cursor: default;
  }

  &.splitter-handle-disabled > .splitter_bar > .splitter_handle {
    cursor: inherit;
  }
}

.splitter_bar {
  background-color: @splitter_color;
  position: absolute;
  padding: 0 !important;
  box-sizing: border-box;

  > .splitter_handle {
    cursor: pointer;
    background-color: @handle_color;
    position: relative;
    margin: auto;
    z-index: 1000;
    box-sizing: border-box;

    &:hover {
      background-color: @handle_hover;
      border-color: @handle_hover;
    }

    &:active {
      background-color: @handle_active;
      border-color: @handle_active;
    }
  }

  &.splitter-invisible {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  &.splitter-invisible,
  &.splitter-handle-none {
    .splitter_handle {
      display: none;
    }
  }
}

.splitter-vertical {
  > .splitter_bar {
    border-left: 1px solid @splitter_highlight;
    border-right: 1px solid @splitter_shadow;
    cursor: ew-resize;
    z-index: 900;
    width: @splitter_size;
    height: 100%;

    > .splitter_handle {
      top: 50%;
      margin-top: -25px;
      height: @handle_size;
    }

    &.splitter-handle-default,
    &.splitter-handle-stripes {
      > .splitter_handle {
        width: 3px;
        border-left: 1px solid @handle_color;
        border-right: 1px solid @handle_color;
        background-color: transparent;

        &:hover {
          border-color: @handle_hover;
        }

        &:active {
          border-color: @handle_active;
        }
      }
    }

    &.splitter-handle-bar {
      > .splitter_handle {
        width: 3px;
      }
    }

    &.splitter-handle-block {
      > .splitter_handle {
        width: @splitter_size - 2;
      }
    }

    &.splitter-handle-dots {
      > .splitter_handle {
        margin-left: -1px;
        background-color: transparent;
        background-image: radial-gradient(circle 3px at 50% 10%, @splitter_shadow 1.5px, transparent 2px),
        radial-gradient(circle 3px at 50% 30%, @splitter_shadow 1.5px, transparent 2px),
        radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
        radial-gradient(circle 3px at 50% 70%, @splitter_shadow 1.5px, transparent 2px),
        radial-gradient(circle 3px at 50% 90%, @splitter_shadow 1.5px, transparent 2px);

        &:hover,
        &:active {
          background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
          radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
          radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
          radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
          radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
        }
      }
    }

    &.splitter-handle-lotsofdots {
      > .splitter_handle {
        height: 100px;
        margin-top: -50px;
        margin-left: -1px;
        background-color: transparent;
        background-image: radial-gradient(circle 1px at 50% 5%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 10%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 15%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 20%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 25%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 30%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 35%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 40%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 45%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 55%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 60%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 65%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 70%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 75%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 80%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 85%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 90%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 95%, @splitter_shadow 1.5px, transparent 1.5px);

        &:hover,
        &:active {
          background-color: #f0f0f0;
        }
      }
    }
  }
}

.splitter-horizontal {
  > .splitter_bar {
    border-top: 1px solid @splitter_highlight;
    border-bottom: 1px solid @splitter_shadow;
    cursor: ns-resize;
    z-index: 800;
    width: 100%;
    height: @splitter_size;

    > .splitter_handle {
      width: @handle_size;
    }

    &.splitter-handle-default,
    &.splitter-handle-stripes {
      > .splitter_handle {
        height: 3px;
        margin-top: 1px;
        border-top: 1px solid @handle_color;
        border-bottom: 1px solid @handle_color;
        background-color: transparent;

        &:hover {
          border-color: @handle_hover;
        }

        &:active {
          border-color: @handle_active;
        }
      }
    }

    &.splitter-handle-bar {
      > .splitter_handle {
        height: 3px;
        margin-top: 1px;
      }
    }

    &.splitter-handle-block {
      > .splitter_handle {
        height: @splitter_size - 2;
        margin-top: 1px;
      }
    }

    &.splitter-handle-dots {
      > .splitter_handle {
        height: 100%;
        margin-top: -1px;
        background-color: transparent;
        background-image: radial-gradient(circle 3px at 10% 50%, @splitter_shadow 1.5px, transparent 2px),
        radial-gradient(circle 3px at 30% 50%, @splitter_shadow 1.5px, transparent 2px),
        radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
        radial-gradient(circle 3px at 70% 50%, @splitter_shadow 1.5px, transparent 2px),
        radial-gradient(circle 3px at 90% 50%, @splitter_shadow 1.5px, transparent 2px);

        &:hover,
        &:active {
          background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
          radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
          radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
          radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
          radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px);
        }
      }
    }

    &.splitter-handle-lotsofdots {
      > .splitter_handle {
        height: 100%;
        width: 100px;
        background-color: transparent;
        background-image: radial-gradient(circle 1px at 5% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 10% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 15% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 20% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 25% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 30% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 35% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 40% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 45% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 55% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 60% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 65% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 70% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 75% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 80% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 85% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 90% 50%, @splitter_shadow 1.5px, transparent 1.5px),
        radial-gradient(circle 1px at 95% 50%, @splitter_shadow 1.5px, transparent 1.5px);

        &:hover,
        &:active {
          background-color: #f0f0f0;
        }
      }
    }
  }
}

.splitter_container.splitter-active {
  > .splitter_bar {
    z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */

    > .splitter_handle {
      border-color: @handle_active;
      cursor: inherit;
    }

    &.splitter-handle-bar > .splitter_handle,
    &.splitter-handle-block > .splitter_handle {
      background-color: @handle_active;
    }
  }

  &.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
    background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
    radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
    radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
    radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
    radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
  }

  &.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
    background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
    radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
    radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
    radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
    radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px),
  }

  &.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
    background-color: #f0f0f0;
  }
}

.splitter_mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}