// Overwriting so we fa-user elements are actually shown in the
// activities list.
.activity .fa-user {
  color: $gray-mid;
}

.activity {
  border-left: 1px solid $gray-light;
  margin-left: 2em;
  margin-top: -15px;
  .activitie-container {
    display: flex;
    overflow: hidden;
  }
  img {
    border-radius: 100%;
    border: 4px solid $gray-light;
    width: 40px;
  }
  li {
    list-style: none;
    margin-left: -4.6em;
    padding-bottom: 3em ;
    &:first-of-type {
      padding-top: 3em;
    }
    &:last-of-type {
      background: $white;
      padding-bottom: 1em ;
    }
    .user-image, .activity-type, .description {
      display: inline-block;
      margin-right: 1.2em;
      vertical-align: top;
    }
    .description {
      background: $white;
      width: 100%;
      margin-right: 0;
      margin-top: 0;
      h6 {
        margin: 0;
      }
      a {
        @media (max-width: 767px) {
          max-width: 15rem;
        }
        max-width: 20rem;
        vertical-align: bottom;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
      }
    }
    .activity-type {
      border-radius: 100%;
      background: red;
      height: 4rem;
      flex: 0 0 4rem;
      text-align: center;
      i.fa {
        font-size: 1.5em;
        color: $white;
        margin-top: 10px;
      }
      &.repo-pushed {
        background: $activity-repo-pushed;
      }
      &.team-created {
        background: $activity-team-created;
      }
      &.change-role {
        background: $activity-change-role;
      }
      &.remove-member-team {
        background: $activity-remove-member-team;
      }
      &.add-member-team {
        background: $activity-add-member-team;
      }
      &.change-namespace-visibility {
        background: $activity-change-namespace-visibility;
      }
      &.create-namespace {
        background: $activity-create-namespace;
      }
      &.change-description {
        background: $activity-change-description;
      }
      &.application-token-created {
        background: $activity-application-token-created;
      }
      &.application-token-destroyed {
        background: $activity-application-token-destroyed;
      }
      &.change-webhook-visibility {
        background: $activity-change-webhook-visibility;
      }
      &.create-webhook {
        background: $activity-create-webhook;
      }
    }
  }
}
