@use '../../../style/globals';
@use '../../../style/colors';

.recent-activity {
  h3 {
    margin: 0;
  }
  .recent-activity-list {
    padding: 0;
  }
  .event-content {
    padding-left: 16px;
    flex: auto;
    margin: auto;
  }
  .hide-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box;
  }
  .activity-event {
    &:hover {
      .dark & {
        background: colors.color-alternate(dark);
      }
      .light & {
        background: colors.color-alternate(light);
      }
    }
    .dark & {
      border: 1px solid colors.border-color(dark);
    }
    .light & {
      border: 1px solid colors.border-color(light);
    }
    &:not(:first-of-type) {
      border-top-width: 0px;
    }
    &:first-of-type {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    &:last-of-type {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    &.object {
      border-left: 4px solid colors.color(primary);
    }
    &.relationship {
      border-left: 4px solid colors.color(secondary);
    }
    &.note {
      border-left: 4px solid colors.color(engenuity-dark-gray);
    }
    .event-timestamp {
      padding-left: 16px;
    }
  }
  .view-more {
    text-align: center;
    padding: 8px;
    .external-link {
      cursor: pointer;
    }
  }
  .no-activity {
    > .empty-list-marker {
      padding: 25px;
    }
  }
}
