@use "sass:color";

$connectorBackground: #d8f2ff !default;
$connectorBorder: #a2d7f2 !default;
$gutterBackground: #efefef !default;
$copyArrowsColor: #000 !default;
$mergeRightColor: #c98100 !default;
$mergeLeftColor: #004ea0 !default;

.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 color.adjust($gutterBackground, $lightness: -20%);
    border-right: 1px solid color.adjust($gutterBackground, $lightness: -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(color.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;
      }
    }
  }
}