.trending-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid lighten($ui-base-color, 8%);

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

  &__name {
    flex: 1 1 auto;
    color: $dark-text-color;

    @include text-overflow(nowrap);

    strong {
      font-weight: 500;
    }

    a {
      display: block;
      color: $darker-text-color;
      text-decoration: none;

      @include text-sizing(14px, 500);
      @include text-overflow(nowrap);

      &:hover,
      &:focus,
      &:active {
        span {
          text-decoration: underline;
        }
      }
    }
  }

  &__uses {
    flex: 0 0 auto;
    width: 100px;
    color: $secondary-text-color;

    @include text-sizing(24px, 500, 36px, center);
  }

  &__sparkline {
    flex: 0 0 auto;
    width: 50px;

    path {
      stroke: lighten($highlight-text-color, 6%) !important;
    }
  }
}