
.IssueList {
  border-right: 1px solid #e5e5e5;
  overflow-x: hidden;
  overflow-y: auto;
}

.IssueListItem {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 7px 10px 7px 30px;
  min-height: 87px;

  & + & {
    border-top: 1px solid #e5e5e5;
  }

  &:last-child {
    box-shadow: 0 1px 0 #e5e5e5;
  }

  > * + * {
    margin-top: 6px;
  }

  &:global(.open)   .title :global(.octicon) { color: #6cc644; }
  &:global(.closed) .title :global(.octicon) { color: #bd2c00; }
  &:global(.merged) .title :global(.octicon) { color: #6e5494; }

  .repo {
    font-size: 12px;
    color: #bfbfbf;
    overflow: visible;
    position: relative;

    .unreadMarker {
      width: 10px;
      height: 10px;
      background-color: #7FA5CF;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: (10px + 10px) * -1;
    }
  }

  .commentCount {
    margin-left: auto;
    :global(.octicon-comment) {
      font-size: 13px;
      margin-top: 2px;
      margin-right: 2px;
    }
  }

  .title {
    font-size: 14px;
    font-weight: bold;

    position: relative;
    overflow: visible;

    :global(.octicon) {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: (16px + 7.5px) * -1;
    }
  }

  .body {
    color: #989898;
    font-size: 13px;
    line-height: 1.4em;
    max-height: calc(1.4em * 3);
    overflow: hidden;
    word-break: break-word;
  }
}

.IssueListItemSelected {
  composes: IssueListItem;
  background-color: #7FA5CF;

  &, & + .IssueListItem {
    border-top-color: #fff !important;
  }

  &:last-child {
    box-shadow: 0 1px 0 #fff;
  }

  &, .repo, .title {
    color: #fff;
  }

  .repo .unreadMarker {
    background-color: #fff;
  }

  &:global(.open),
  &:global(.closed),
  &:global(.merged) {
    :global(.octicon) {
      color: #fff;
    }
  }

  .body {
    color: #d2dfee;
  }
}
