.commits-compare-switch {
  @include btn-default;
  @include btn-white;
  float: left;
  margin-right: 9px;
}

.commit-header {
  padding: 5px 10px;
  background-color: $background-color;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 14px;

  &:first-child {
    border-top-width: 0;
  }
}

.commit-row-title {
  line-height: 1.35;

  .notes_count {
    float: right;
    margin-right: 10px;
  }

  .str-truncated {
    max-width: 70%;
  }

  .commit-row-message {
    color: $gl-dark-link-color;
  }

  .text-expander {
    display: inline-block;
    background: $gray-light;
    color: $gl-placeholder-color;
    padding: 0 5px;
    cursor: pointer;
    border: 1px solid $border-gray-dark;
    border-radius: $border-radius-default;
    margin-left: 5px;
    line-height: 1;

    &:hover {
      background-color: darken($gray-light, 10%);
      text-decoration: none;
    }
  }
}

.commit-actions {
  @media (min-width: $screen-sm-min) {
    float: right;
    margin-left: $gl-padding;
    margin-top: 2px;
    font-size: 0;
  }

  .ci-status-link {
    display: inline-block;
  }

  .btn-clipboard, .btn-transparent {
    padding-left: 0;
    padding-right: 0;
  }

  .btn {
    &:not(:first-child) {
      margin-left: $gl-padding;
    }
  }
}

.commit-short-id {
  font-family: $monospace_font;
  font-weight: 600;
}

.commit {
  padding: 10px 0;
  position: relative;

  @media (min-width: $screen-sm-min) {
    padding-left: 46px;
  }

  &:not(:last-child) {
    border-bottom: 1px solid #eee;
  }

  a,
  button {
    color: $gl-dark-link-color;
    vertical-align: baseline;
  }


  .avatar {
    margin-left: -46px;
  }

  .item-title {
    display: inline-block;

    @media (min-width: $screen-sm-min) {
      max-width: 70%;
    }
  }

  .commit-row-description {
    font-size: 14px;
    border-left: 1px solid $btn-gray-hover;
    padding: 10px 15px;
    margin: 10px 0;
    background: $gray-light;
    display: none;
    white-space: pre-line;
    word-break: normal;

    pre {
      border: none;
      background: inherit;
      padding: 0;
      margin: 0;
      white-space: pre-wrap;
    }

    a {
      color: $gl-dark-link-color;
    }
  }

  .commit-row-info {
    color: $gl-gray;
    line-height: 1.35;

    a {
      color: $gl-gray;
    }

    .avatar {
      margin-right: 8px;
    }
  }

  &.inline-commit {
    .commit-row-title {
      font-size: 13px;
    }

    .committed_ago {
      float: right;
      @extend .cgray;
    }
  }
}

.branch-commit {
  color: $gl-gray;

  .commit-id, .commit-row-message {
    color: $gl-gray;
  }
}

.divergence-graph {
  padding: 12px 12px 0 0;
  float: right;

  .graph-side {
    position: relative;
    width: 80px;
    height: 22px;
    padding: 5px 0 13px;
    float: left;

    .bar {
      position: absolute;
      height: 4px;
      background-color: #ccc;
    }

    .bar-behind {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    .bar-ahead {
      left: 0;
      border-radius: 0 3px 3px 0;
    }

    .count {
      padding-top: 6px;
      padding-bottom: 0;
      font-size: 12px;
      color: #333;
      display: block;
    }

    .count-behind {
      padding-right: 4px;
      text-align: right;
    }

    .count-ahead {
      padding-left: 4px;
      text-align: left;
    }
  }

  .graph-separator {
    position: relative;
    width: 1px;
    height: 18px;
    margin: 5px 0 0;
    float: left;
    background-color: #ccc;
  }
}