OpenC3/cosmos

.acediff {
  // .acediff class itself got no styles

  // We have to provide some dimensions for the ACE editor
  // This will expand to whatever space is available
  &__wrap {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0;
    width: 100%;
    top: 0px;
    left: 0px;

    // these 3 lines are to prevents an unsightly scrolling bounce affect on Safari
    height: 100%;
    overflow: auto;
  }

  &__gutter {
    flex: 0 0 60px;
    border-left: 1px solid darken($gutterBackground, 20);
    border-right: 1px solid darken($gutterBackground, 20);
    background-color: $gutterBackground;
    overflow: hidden;

    svg {
      background-color: $gutterBackground;
    }
  }
  &__left,
  &__right {
    height: 100%;
    flex: 1;
  }

  // The line that's rendered in ACE editor under diffed lines
  &__diffLine {
    background-color: $connectorBackground;
    border-top: 1px solid $connectorBorder;
    border-bottom: 1px solid $connectorBorder;
    position: absolute;
    z-index: 4;
    &.targetOnly {
      height: 0px !important;
      border-top: 1px solid $connectorBorder;
      border-bottom: 0px;
      position: absolute;
    }
  }

  // SVG connector
  &__connector {
    fill: $connectorBackground;
    stroke: $connectorBorder;
  }

  // Arrows for merging diffs
  &__copy--right,
  &__copy--left {
    position: relative;

    div {
      color: $copyArrowsColor;
      text-shadow: 1px 1px rgba(invert($copyArrowsColor), 0.7);
      position: absolute;
      margin: 2px 3px;
      cursor: pointer;
    }
  }
  &__copy--right div:hover {
    color: $mergeLeftColor;
  }

  &__copy--left {
    float: right;

    div {
      right: 0px;

      &:hover {
        color: $mergeRightColor;
      }
    }
  }
}