@import (optional, reference) '../../style/themes/index';

@splitpanes-prefix-cls: ~'@{mega-prefix}-split-panes';

.@{splitpanes-prefix-cls} {
  display: flex;
  width: 100%;
  height: 100%;
  &--vertical {
    flex-direction: row;
  }
  &--horizontal {
    flex-direction: column;
  }
  &--dragging * {
    user-select: none;
  }

  &__pane {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .@{splitpanes-prefix-cls}--vertical & {
      transition: width 0.2s ease-out;
    }
    .@{splitpanes-prefix-cls}--horizontal & {
      transition: height 0.2s ease-out;
    }
    .@{splitpanes-prefix-cls}--dragging & {
      transition: none;
    }
    &__layer {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 999999;
      filter: alpha(opacity=0);
      opacity: 0;
      background: transparent;
    }
  }

  // Disable default zoom behavior on touch device when double tapping splitter.
  &__splitter {
    touch-action: none;
  }
  &--vertical > .@{splitpanes-prefix-cls}__splitter {
    min-width: 1px;
    cursor: col-resize;
  }
  &--horizontal > .@{splitpanes-prefix-cls}__splitter {
    min-height: 1px;
    cursor: row-resize;
  }
}
.default {
  .@{splitpanes-prefix-cls}__splitter {
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: fade(@text-color, 60%);
      transition: background-color 0.3s;
    }
    &:hover:before,
    &:hover:after {
      background-color: fade(@text-color, 90%);
    }
    &:first-child {
      cursor: auto;
    }
  }
  &.@{splitpanes-prefix-cls}
    .@{splitpanes-prefix-cls}
    .@{splitpanes-prefix-cls}__splitter {
    z-index: 1;
  }
  &.@{splitpanes-prefix-cls}--vertical > .@{splitpanes-prefix-cls}__splitter,
  .@{splitpanes-prefix-cls}--vertical > .@{splitpanes-prefix-cls}__splitter {
    width: 7px;
    border-left: 1px solid fade(@text-color, 20%);
    border-right: 1px solid fade(@text-color, 20%);
    background: linear-gradient(to right, @white 0%, rgba(0, 0, 0, 0.1) 100%);
    &:before,
    &:after {
      transform: translateY(-50%);
      width: 1px;
      height: 30px;
    }
    &:before {
      margin-left: -2px;
    }
    &:after {
      margin-left: 1px;
    }
  }
  &.@{splitpanes-prefix-cls}--horizontal > .@{splitpanes-prefix-cls}__splitter,
  .@{splitpanes-prefix-cls}--horizontal > .@{splitpanes-prefix-cls}__splitter {
    height: 7px;
    border-top: 1px solid fade(@text-color, 20%);
    border-bottom: 1px solid fade(@text-color, 20%);
    background: linear-gradient(to bottom, @white 0%, rgba(0, 0, 0, 0.1) 100%);
    &:before,
    &:after {
      transform: translateX(-50%);
      width: 30px;
      height: 1px;
    }
    &:before {
      margin-top: -2px;
    }
    &:after {
      margin-top: 1px;
    }
  }
}
.line {
  &.@{splitpanes-prefix-cls} {
    background-color: @primary-1;
  }
  .@{splitpanes-prefix-cls}__splitter {
    position: relative;
  }
  .@{splitpanes-prefix-cls}__splitter:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.5s;
    background-color: @primary-color;
    opacity: 0;
    z-index: 1;
  }
  .@{splitpanes-prefix-cls}__splitter:hover:before {
    opacity: 1;
  }
  &.@{splitpanes-prefix-cls}--vertical
    > .@{splitpanes-prefix-cls}__splitter:before {
    left: -5px;
    right: -5px;
    height: 100%;
  }
  &.@{splitpanes-prefix-cls}--horizontal
    > .@{splitpanes-prefix-cls}__splitter:before {
    top: -5px;
    bottom: -5px;
    width: 100%;
  }
}