@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './token.less';

@split-prefix-cls: ~'@{kd-prefix}-split';
@split-panel-padding-base: calc(@split-panel-trigger-line-width / 2);

.@{split-prefix-cls} {
    &-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        border: @split-panel-wrapper-border-width solid @split-panel-trigger-border-color;
        overflow: hidden;
    }
    &-panel {
        position: absolute;
        overflow: hidden;
        &.left-panel, &.right-panel {
            top: 0;
            bottom: 0;
        }
        &.left-panel {
            left: 0;
            margin-right: @split-panel-padding-base;
        }
        &.right-panel {
            right: 0;
            margin-left: @split-panel-padding-base;
        }
        &.top-panel, &.bottom-panel {
            left: 0;
            right: 0;
        }
        &.top-panel {
            top: 0;
            margin-bottom: @split-panel-padding-base;
        }
        &.bottom-panel {
            bottom: 0;
            margin-top: @split-panel-padding-base;
        }
        &-moving {
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
    }
    &-trigger {
        &-con {
          position: absolute;
          transform: translate(-50%, -50%);
          z-index: 10;
          &.is-active {
            .@{split-prefix-cls}-trigger-arrow {
              border-color: @split-panel-trigger-arrow-color;
              background: @split-panel-trigger-arrow-color;
              color: white;
            }
          }
          &.can-drag{
            .@{split-prefix-cls}-trigger-vertical {
              cursor: col-resize;
            }
            .@{split-prefix-cls}-trigger-horizontal {
              cursor: row-resize;
            }
          }
          &.is-disabled{
            .@{split-prefix-cls}-trigger-vertical {
              cursor: not-allowed;
            }
          }
          &:not(.is-disabled) {
            &:hover{
              .@{split-prefix-cls}-trigger-arrow {
                border-color: @split-panel-trigger-arrow-color;
              }
            }
            .@{split-prefix-cls}-trigger-arrow:hover {
              cursor: pointer;
              background: #fff !important;
              color: @split-panel-trigger-arrow-hover-color !important;
              border-color: @split-panel-trigger-arrow-hover-color !important;
            }
          }
        }
        &-arrow {
          position: absolute;
          color: @split-panel-trigger-arrow-color;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          border: @split-panel-arrow-border-width solid transparent;
          .@{kd-prefix}icon {
            font-size: 12px;
          }
          &.is-vertical {
              width: @split-panel-arrow-vertical-width;
              height: @split-panel-arrow-vertical-height;
              top: 50%;
              transform: translate(0, -50%);
          }
          &.is-horizontal {
              width: @split-panel-arrow-horizontal-width;
              height: @split-panel-arrow-horizontal-height;
              left: 50%;
              transform: translate(-50%, 0);
          }
          &.top {
            bottom: 100%;
            border-bottom: none;
            border-radius: @split-panel-arrow-vertical-radius @split-panel-arrow-vertical-radius 0 0;
          }
          &.bottom {
            top: 100%;
            border-top: none;
            border-radius: 0 0 @split-panel-arrow-vertical-radius @split-panel-arrow-vertical-radius;
          }
          &.left {
            right: 100%;
            border-right: none;
            border-radius: @split-panel-arrow-horizontal-radius 0 0 @split-panel-arrow-horizontal-radius;
          }
          &.right {
            left: 100%;
            border-left: none;
            border-radius: 0 @split-panel-arrow-horizontal-radius @split-panel-arrow-horizontal-radius 0;
          }
        }
        &-vertical {
          width: @split-panel-trigger-line-width;
          height: 100%;
          background: @split-panel-trigger-line-color;
          border-top: none;
          border-bottom: none;
        }
        &-horizontal {
          height: @split-panel-trigger-line-width;
          width: 100%;
          background: @split-panel-trigger-line-color;
          border-left: none;
          border-right: none;
        }
        &.is-disabled{
          cursor: not-allowed;
        }
    }
    &-horizontal {
        > .@{split-prefix-cls}-trigger-con {
            top: 50%;
            height: 100%;
        }
    }
    &-vertical {
        > .@{split-prefix-cls}-trigger-con {
            left: 50%;
            width: 100%;
        }
    }
    .no-select {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}