@import "../../variables.scss";

.side-by-side {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  position: absolute;
}

[dir="ltr"] .side-by-side {
  direction: ltr;
  flex-direction: row;

  &__left {
    overflow: auto;
    flex: 0 0 auto;
  }

  &__right {
    overflow: auto;
    flex: 1 1 auto;
  }
}

[dir="rtl"] .side-by-side {
  direction: ltr;
  box-orient: horizontal;
  flex-direction: row-reverse;

  &__left {
    direction: rtl;
    overflow: auto;
    flex: 0 0 auto;
  }

  &__right {
    direction: rtl;
    overflow: auto;
    flex: 1 1 auto;
  }
}

[dir="rtl"] .tree__ctrl {
  overflow: hidden;
}

.gutter {
  background: $border-color no-repeat 50%;
  &:hover {
    cursor: ew-resize;
  }
}

.gutter-horizontal {
  background-image: url("vertical.png");
}