@import '../../mixins';
/** A React component holding history's commit list */
#commit-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;

  .draggable,
  .commit {
    width: 100%;
    height: 100%;
  }

  .list-item.selected:not(.in-keyboard-insertion-mode) {
    .commit {
      .unpushed-indicator {
        background: var(--list-item-selected-badge-background-color);
        color: var(--list-item-selected-badge-color);
      }
      .tag-name {
        background: var(--list-item-selected-badge-background-color);
        color: var(--list-item-selected-badge-color);
        box-shadow: 1px 0 0 var(--box-selected-background-color);
      }
      .tag-indicator-more {
        background: var(--list-item-selected-badge-background-color);
      }

      background-color: var(--box-selected-background-color);
    }
  }

  &.has-highlighted-commits {
    .list-item {
      transition: opacity 0.5s;

      &:not(.highlighted) {
        opacity: 30%;
      }
    }
  }

  &:not(.has-highlighted-commits) {
    .list-item {
      transition: opacity 0.25s;
    }
  }

  .focus-within:not(.in-keyboard-insertion-mode) {
    .list-item.selected {
      .commit {
        .unpushed-indicator {
          background: var(--list-item-selected-active-badge-background-color);
          color: var(--list-item-selected-active-badge-color);
        }
        .tag-name {
          background: var(--list-item-selected-active-badge-background-color);
          color: var(--list-item-selected-active-badge-color);
          box-shadow: 1px 0 0 var(--box-selected-active-background-color);
        }
        .tag-indicator-more {
          background: var(--list-item-selected-active-badge-background-color);
          color: var(--list-item-selected-active-badge-color);
        }

        background-color: var(--box-selected-active-background-color);
      }
    }
  }

  .list-item.selected-for-keyboard-insertion {
    .commit {
      color: var(--box-selected-text-color);
      background-color: var(--box-selected-background-color);

      .byline {
        color: var(--box-selected-text-color);
      }
    }
  }

  .reorder-commits-hint-popover {
    background-color: var(--background-color);
    border: var(--base-border);
    border-radius: var(--border-radius);
    padding: var(--spacing);

    p {
      margin: var(--spacing-half) 0;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

#commit-drag-element .commit,
#commit-list .commit {
  display: flex;
  flex-direction: row;
  align-items: center;

  background-color: var(--background-color);
  border-bottom: var(--base-border);

  // We need to give a bit more padding to the right to make place for the scrollbar
  padding-right: calc(var(--spacing) + var(--spacing-half));
  padding-left: var(--spacing);

  .info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-top: -4px;
    overflow: hidden;
    min-width: 50px;

    .description {
      display: flex;
      flex-direction: row;
      margin-top: 3px;
    }

    .summary {
      font-weight: var(--font-weight-semibold);

      &.empty-summary {
        color: var(--text-secondary-color);
      }
    }

    .summary,
    .byline {
      @include ellipsis;
    }
  }

  .commit-indicators {
    display: flex;
    flex-flow: nowrap row;
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: var(--spacing);
    color: var(--list-item-badge-color);
    height: 16px;
    line-height: 16px;
    max-width: 50%;

    .tag-indicator {
      display: flex;
      flex: 0 1 auto;
      height: 100%;
      min-width: 0;

      .tag-name {
        flex: 1 1 auto;
        padding: 0 var(--spacing-half);
        border-radius: var(--border-radius);
        background: var(--list-item-badge-background-color);
        box-shadow: 1px 0 0 var(--background-color);
        z-index: 3;
        @include ellipsis;
      }

      .tag-indicator-more {
        flex: 0 0 auto;
        width: var(--spacing);
        margin-left: -5px;
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        background: var(--list-item-badge-background-color);
      }
    }

    .unpushed-indicator {
      flex: 0 0 auto;
      height: 100%;
      border-radius: 8px;
      padding: 0 var(--spacing-half);
      background: var(--list-item-badge-background-color);
      margin-left: var(--spacing-half);
    }
  }

  .tool-tip-contents {
    display: none;
  }
}

.commit-list-item-tooltip {
  &.list-item-tooltip {
    .label {
      min-width: 35px !important;
    }

    .author {
      align-items: center;

      .avatar {
        width: 24px;
        height: 24px;
      }
    }

    .unpushed-indicator {
      display: inline-flex;
      flex: 0 0 auto;
      border-radius: 8px;
      padding: 0 var(--spacing-half);
      color: var(--list-item-badge-color);
      align-items: center;
      background: var(--list-item-selected-badge-background-color);
      margin-top: 3px;
    }
  }
}
