@aplus-frontend/ui/theme/splitter/index.less

@import '../mixins/mixins.less';
@import '../mixins/config.less';

.split-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.split-bar-preview {
  position: absolute;
  z-index: 1;
  display: none;
  background: var(--ap-color-primary);
  opacity: 0.2;
  transition: none;
  pointer-events: none;
}

@s: ~'@{ns}-splitter';
@spb: ~'@{s}-bar';
@sbp: ~'@{spb}-preview';
@sbpa: ~'@{sbp}-active';
@sbd: ~'@{spb}-dragger';
@sbcb: ~'@{spb}-collapse-bar';
@sbda: ~'@{sbd}-active';
@offset: ~'--@{ns}-splitter-bar-preview-offset';

.b(splitter, {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: @text-color-base;
  font-size: @font-size-base;
  line-height: @line-height-base;
  list-style: none;
  font-family: inherit;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;

  & > &-bar {
    flex: none;
    position: relative;
    user-select: none;
    .@{sbd} {
      z-index: 1;
      .split-center();
      // Hover background
      &::before {
        content: "";
        background: rgba(0, 0, 0, 0.04);
        .split-center();
      }
      // Spinner
      &::after {
        content: "";
        background: rgba(0, 0, 0, 0.15);
        .split-center();
      }
      // Hover
      &:hover:not(.@{sbda}) {
        &::before {
          background: #e6f4ff;
        }
      }
      // Active
      &-active {
        z-index: 2px;
        &::before {
          background: #bae0ff;
        }
      }
      &-disabled.@{sbd} {
        z-index: 0;
        &, &:hover, &-active {
          cursor: default;
          &::before {
            background: rgba(0,0,0,0.04);
          }
        }
        &::after {
          display: none;
        }
      }
    }
    .@{sbcb} {
      .split-center();
      z-index: 1000;
      background: rgba(0,0,0,0.04);
      font-size: @font-size-small;
      border-radius: 2px;
      color: @text-color-base;
      cursor: pointer;
      opacity: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        background-color: rgba(0, 0, 0, 0.15);
      }

      &:active {
        background-color: #e6f4ff;
      }
    }
    &:hover, &:active {
      .@{sbcb} {
        opacity: 1;
      }
    }
  }

  &-mask {
    position: fixed;
    z-index: 1000;
    inset: 0;

    &-horizontal {
      cursor: col-resize;
    }
    &-vertical {
      cursor: row-resize;
    }
  }

  &-horizontal {
    flex-direction: row;
    & > .@{spb} {
      width: 0;
      .@{sbp} {
        height: 100%;
        width: @split-bar-size;
        .split-bar-preview();
        &-active {
          display: block;
          transform: translateX(var(@offset));
        }
      }
      .@{sbd} {
        cursor: col-resize;
        height: 100%;
        width: @split-trigger-size;

        &::before {
          height: 100%;
          width: @split-bar-size;
        }

        &::after {
          height: @split-bar-draggable-size;
          width: @split-bar-size;
        }
      }
      .@{sbcb} {
        width: @font-size-small;
        height: 24px;

        &-start {
          left: auto;
          right: calc(@split-trigger-size / 2);
          transform: translateY(-50%);
        }

        &-end {
          left: calc(@split-trigger-size / 2);
          right: auto;
          transform: translateY(-50%);
        }

      }
    }
  }

  &-vertical {
    flex-direction: column;
    & > .@{spb} {
      height: 0;
      .@{sbp} {
        height: @split-bar-size;
        width: 100%;
        .split-bar-preview();
        &.@{sbpa} {
          display: block;
          transform: translateY(var(@offset));
        }
      }
      .@{sbd} {
        cursor: row-resize;
        width: 100%;
        height: @split-trigger-size;

        &::before {
          width: 100%;
          height: @split-bar-size;
        }

        &::after {
          width: @split-bar-draggable-size;
          height: @split-bar-size;
        }
      }
      .@{sbcb} {
        height: @font-size-small;
        width: 24px;

        &-start {
          top: auto;
          bottom: calc(@split-trigger-size / 2);
          transform: translateX(-50%);
        }

        &-end {
          top: calc(@split-trigger-size / 2);
          bottom: auto;
          transform: translateX(-50%);
        }
      }
    }
  }

  &-panel {
    overflow: auto;
    padding: 0 1px;
    scrollbar-width: thin;
    box-sizing: border-box;

    &-hidden {
      padding: 0;
      overflow: hidden;
    }

    &:has(.@{s}:only-child) {
      overflow: hidden
    }
  }
});