@import "ui-variables";

@hunk-fg-color: @text-color-subtle;
@hunk-bg-color: @pane-item-background-color;

.github-HunkView {
  font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  border-bottom: 1px solid @pane-item-border-color;
  background-color: @hunk-bg-color;

  &-header {
    display: flex;
    align-items: stretch;
    font-size: .9em;
    background-color: @panel-heading-background-color;
    border-bottom: 1px solid @panel-heading-border-color;
  }

  &-title {
    flex: 1;
    line-height: 2.4;
    padding: 0 @component-padding;
    color: @text-color-subtle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-font-smoothing: antialiased;
  }

  &-stageButton,
  &-discardButton {
    line-height: 1;
    padding-left: @component-padding;
    padding-right: @component-padding;
    font-family: @font-family;
    border: none;
    border-left: 1px solid @panel-heading-border-color;
    background-color: transparent;
    cursor: default;
    &:hover  { background-color: @button-background-color-hover; }
    &:active { background-color: @panel-heading-border-color; }
  }

  // pixel fit the icon
  &-discardButton:before {
    text-align: left;
    width: auto;
  }

  &-line {
    display: table-row;
    line-height: 1.5em;
    color: @hunk-fg-color;
    &.is-unchanged {
      -webkit-font-smoothing: antialiased;
    }
  }

  &-lineNumber {
    display: table-cell;
    min-width: 3.5em; // min 4 chars
    overflow: hidden;
    padding: 0 .5em;
    text-align: right;
    border-right: 1px solid @base-border-color;
    -webkit-font-smoothing: antialiased;
  }

  &-plusMinus {
    margin-right: 1ch;
    color: fade(@text-color, 50%);
  }

  &-lineContent {
    display: table-cell;
    padding: 0 .5em 0 3ch; // indent 3 characters
    text-indent: -2ch; // remove indentation for the +/-
    white-space: pre-wrap;
    word-break: break-word;
    width: 100%;
  }
}


//
// States
// -------------------------------

.github-HunkView.is-selected.is-hunkMode .github-HunkView-header {
  background-color: @background-color-selected;
  .github-HunkView-title {
    color: @text-color;
  }
  .github-HunkView-stageButton, .github-HunkView-discardButton {
    border-color: mix(@text-color, @background-color-selected, 25%);
  }
}

.github-HunkView-title:hover {
  color: @text-color-highlight;
}

.github-HunkView-line {

  // mixin
  .hunk-line-mixin(@fg; @bg) {
    &:hover {
      background-color: @background-color-highlight;
    }
    &.is-selected {
      color: @text-color;
      background-color: @background-color-selected;
    }
    .github-HunkView-lineContent {
      color: saturate( mix(@fg, @text-color-highlight, 20%), 20%);
      background-color: saturate( mix(@bg, @hunk-bg-color, 15%), 20%);
    }
    // hightlight when focused + selected
    .github-FilePatchView:focus &.is-selected .github-HunkView-lineContent  {
      color: saturate( mix(@fg, @text-color-highlight, 10%), 10%);
      background-color: saturate( mix(@bg, @hunk-bg-color, 25%), 10%);
    }
  }

  &.is-deleted {
    .hunk-line-mixin(@text-color-error, @background-color-error);
  }

  &.is-added {
    .hunk-line-mixin(@text-color-success, @background-color-success);
  }

  // divider line between added and deleted lines
  &.is-deleted + .is-added .github-HunkView-lineContent {
    box-shadow: 0 -1px 0 hsla(0,0%,50%,.1);
  }

}

// focus colors
.github-FilePatchView:focus {
  .github-HunkView.is-selected.is-hunkMode .github-HunkView-title,
  .github-HunkView.is-selected.is-hunkMode .github-HunkView-header,
  .github-HunkView-line.is-selected .github-HunkView-lineNumber {
    color: contrast(@button-background-color-selected);
    background: @button-background-color-selected;
  }
  .github-HunkView-line.is-selected .github-HunkView-lineNumber {
    border-color: mix(@button-border-color, @button-background-color-selected, 25%);
  }
  .github-HunkView.is-selected.is-hunkMode .github-HunkView {
    &-stageButton,
    &-discardButton {
      border-color: mix(@hunk-bg-color, @button-background-color-selected, 30%);
      &:hover  { background-color: mix(@hunk-bg-color, @button-background-color-selected, 10%); }
      &:active { background-color: @button-background-color-selected; }
    }
  }
}
