.acediff {
  // CSS Custom Properties with light theme defaults
  --acediff-gutter-bg: #efefef;
  --acediff-gutter-border: #bcbcbc;
  --acediff-diff-bg: #d8f2ff;
  --acediff-diff-border: #a2d7f2;
  --acediff-diff-char-bg: #b8e2f5;
  --acediff-arrow-color: #000;
  --acediff-arrow-shadow: rgba(255, 255, 255, 0.7);
  --acediff-arrow-hover-left: #004ea0;
  --acediff-arrow-hover-right: #c98100;

  // 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 var(--acediff-gutter-border);
    border-right: 1px solid var(--acediff-gutter-border);
    background-color: var(--acediff-gutter-bg);
    overflow: hidden;

    svg {
      background-color: var(--acediff-gutter-bg);
    }
  }

  &__left,
  &__right {
    height: 100%;
    flex: 1;
  }

  // The line that's rendered in ACE editor under diffed lines
  &__diffLine {
    background-color: var(--acediff-diff-bg);
    border-top: 1px solid var(--acediff-diff-border);
    border-bottom: 1px solid var(--acediff-diff-border);
    position: absolute;
    z-index: 4;

    &.targetOnly {
      height: 0px !important;
      border-top: 1px solid var(--acediff-diff-border);
      border-bottom: 0px;
      position: absolute;
    }
  }

  // Character-level diff highlighting (darker shade within diff lines)
  &__diffChar {
    background-color: var(--acediff-diff-char-bg);
    position: absolute;
    z-index: 5;
  }

  // Gutter decoration for diff lines
  &__diffGutter {
    background-color: var(--acediff-diff-bg) !important;
  }

  // SVG connector
  &__connector {
    fill: var(--acediff-diff-bg);
    stroke: var(--acediff-diff-border);
  }

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

    div {
      color: var(--acediff-arrow-color);
      text-shadow: 1px 1px var(--acediff-arrow-shadow);
      position: absolute;
      margin: 2px 3px;
      cursor: pointer;
    }
  }

  &__copy--right div:hover {
    color: var(--acediff-arrow-hover-left);
  }

  &__copy--left {
    float: right;

    div {
      right: 0px;

      &:hover {
        color: var(--acediff-arrow-hover-right);
      }
    }
  }
}