// =============================================================================
// COMMIT LIST
// =============================================================================

.commit-list, .task-list, .pr-list {
  list-style-type: none;
  margin: 0; padding: 0;
}

.commit-list-actions {
  float: right;
}

.commit, .task, .pr {
  padding: .75rem 0;
  display: flex;
  flex-direction: column;

  @include media(desktop) {
    flex-direction: row;
    align-items: center;
  }

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


// COMMIT AUTHOR
// -----------------------------------------------------------------------------

.commit-author {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 10em;

  @include media(tablet-down) {
    margin-bottom: 1rem;
  }

  @include media(desktop) {
    margin-right: 1rem;
  }
}

.commit-author__avatar {
  width: 40px;
  height: 40px;
  border-radius: $border-radius;
  margin-right: 0.5rem;
}

.commit-author__name {
  font-size: 0.8em;
}

.commit-author__name__real-name {
  font-weight: 500;
  color: #555;
  display: block;
}

.commit-author__name__username {
  color: $grey;
}


// COMMIT DETAILS
// -----------------------------------------------------------------------------

.commit-details, .pr-details {
  flex-grow: 1;

  @include media(tablet-down) {
    margin-bottom: 1rem;
    order: -1;
  }

  @include truncate;
}

.commit-title {
  font-size: 1em;
  display: block;

  @include media(desktop) {
    @include truncate;
  }
}

.commit-title, .pr-title {
  a {
    color: #333;
  }
}

.pr-details .pr-number .number {
  color: $blue;
}

.commit-lock {
  display: inline-block;
  .icon {
    background-color: #ddd;
  }

  &:hover .icon {
    background-color: darken(#ddd, 20%);
  }

  .action-unlock-commit {
    display: none;
  }
}

.commit.locked .commit-lock {
  .icon {
    background-color: $bright-red;
  }

  &:hover .icon {
    background-color: darken($bright-red, 20%);
  }

  .action-lock-commit {
    display: none;
  }

  .action-unlock-commit {
    display: inline-block;
  }
}

.commit-meta, .pr-meta {
  font-size: 0.8em;
  color: $grey;
  margin: 0;

  .warning {
    color: $orange;
  }
}

.utc-timecode {
  color: #bbb;
}

.code-additions {
  color: $green;
}

.code-deletions {
  color: $red;
}


// COMMIT ACTIONS
// -----------------------------------------------------------------------------

.commit-actions {
  flex-shrink: 0;

  @include media(desktop) {
    margin-left: 1rem;
    min-width: 12rem;

    .btn {
      float: right;
    }
  }
}


// STATUS
// -----------------------------------------------------------------------------

.status-group {
  position: relative; // Required to position the status-items div correctly
  .status-item.ignored {
    opacity: .5;
  }
}

.status {
  flex-shrink: 0;

  @include media(tablet-down) {
    margin-bottom: 1rem;
    order: -2;
  }

  @include media(desktop) {
    margin-right: 0.75rem;
  }
}

.status {
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;

  .status__icon {
    display: block;
    width: 100%;
    height: 100%;
    background: asset-data-url("unknown.svg") center center no-repeat;
  }
}

.status--pending,
[data-deploy-status='pending'] {
  .status__icon {
    background-image: asset-data-url("pending.gif");
    background-size: 21px 5px;
  }
}

.status--running,
[data-deploy-status='running'] {
  border-color: $blue;

  .status__icon {
    background-image: asset-data-url("deploying.svg");
    animation: rotate 2s linear infinite;
  }
}


.status--aborting,
[data-deploy-status='aborting'] {
  border-color: $orange;

  .status__icon {
    background-image: asset-data-url("aborting.svg");
    animation: rotate 2s linear infinite;
  }
}

.status--aborted,
[data-deploy-status='aborted'] {
  border-color: $orange;

  .status__icon {
    background-image: asset-data-url("aborted.svg");
  }
}

.status--flapping,
[data-deploy-status='flapping'] {
  border-color: $orange;

  .status__icon {
    background-image: asset-data-url("flapping.svg");
  }
}

.status--validating,
[data-deploy-status='validating'] {
  border-color: $green;

  .status__icon {
    background-image: asset-data-url("validating.svg");
  }
}

.status--faulty,
[data-deploy-status='faulty'] {
  border-color: $yellow;

  .status__icon {
    background-image: asset-data-url("faulty.svg");
  }
}

.status--success,
[data-deploy-status='success'] {
  border-color: $green;

  .status__icon {
    background-image: asset-data-url("success.svg");
  }
}

.status--failure,
.status--failed,
[data-deploy-status='failure'],
[data-deploy-status='failed'] {
  border-color: $bright-red;

  .status__icon {
    background-image: asset-data-url("failure.svg");
  }
}

.status--error,
[data-deploy-status='error'] {
  border-color: #333;

  .status__icon {
    background-image: asset-data-url("error.svg");
  }
}

.status--timedout,
[data-deploy-status='timedout'] {
  border-color: #333;

  .status__icon {
    background-image: asset-data-url("timedout.svg");
    background-position: top 35% left 50%;
    background-size: 55%;
  }
}


// =============================================================================
// COMMIT SUMMARY
// =============================================================================

.commit-summary-list {
  list-style-type: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.commit-summary {
  display: flex;
  margin-bottom: .5em;
}

.commit-summary__avatar {
  margin-right: .5rem;
}

.commit-summary__avatar img {
  border-radius: 4px;
}

.commit-summary__title {
  flex-grow: 1;
}

.commit-summary__title a {
  color: #555;
}

.commit-summary__sha {
  font-size: 0.875rem;
  color: $grey;
}