:root {
  --separator-border: rgba(128, 128, 128, 0.35);
  --focus-border: #007fd4;
  --sash-size: 4px;
  --sash-hover-size: 2px;
}

.splitView {
  > .sashContainer {
    height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
  }

  > .splitViewContainer {
    height: 100%;
    position: relative;
    white-space: nowrap;
    width: 100%;

    > .splitViewView {
      overflow: hidden;
      position: absolute;
      white-space: initial;
    }
  }

  &.vertical > .splitViewContainer > .splitViewView {
    width: 100%;
  }

  &.horizontal > .splitViewContainer > .splitViewView {
    height: 100%;
  }

  &.separatorBorder //
    > .splitViewContainer
    > .splitViewView:not(:first-child)::before {
    background-color: var(--separator-border);
    content: " ";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 5;
  }

  &.separatorBorder.vertical
    > .splitViewContainer
    > .splitViewView:not(:first-child)::before {
    height: 1px;
    width: 100%;
  }

  &.separatorBorder.horizontal
    > .splitViewContainer
    > .splitViewView:not(:first-child)::before {
    height: 100%;
    width: 1px;
  }
}

/** Sash */

.sash {
  position: absolute;
  z-index: 2;
  touch-action: none;
  pointer-events: auto;
  text-align: initial;

  &.disabled {
    pointer-events: none;
    cursor: default !important;
    pointer-events: none !important;
  }

  &.vertical {
    cursor: ew-resize;
    top: 0;
    width: var(--sash-size);
    height: 100%;

    &:before {
      width: var(--sash-hover-size);
      left: calc(50% - (var(--sash-hover-size) / 2));
    }
    &.minimum {
      cursor: e-resize;
    }
    &.maximum {
      cursor: w-resize;
    }
    &.mac {
      cursor: col-resize;
    }
  }

  &.horizontal {
    cursor: ns-resize;
    left: 0;
    width: 100%;
    height: var(--sash-size);

    &:before {
      height: var(--sash-hover-size);
      top: calc(50% - (var(--sash-hover-size) / 2));
    }
    &.minimum {
      cursor: s-resize;
    }
    &.maximum {
      cursor: n-resize;
    }
    &.mac {
      cursor: row-resize;
    }
  }

  &:before {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: background-color 0.1s ease-out;
    background: transparent;
  }

  &.hover:before,
  &.active:before {
    background: var(--focus-border);
  }
}
