//
// Activity and search results list
// --------------------------------------------------

#activity dl,
#search-results {
  margin-left: $padding-side;
}

#activity,
#search-results {
  dd {
    margin-bottom: $line-height-computed;
    padding-top: .1em;
  }

  dt {
    padding-left: $padding-side;
    background-repeat: no-repeat;
    background-position: 0 center;
  }

  span.project::after {
    content: " -";
  }

  span.description {
    display: block;
    color: $gray-700;
    font-style: italic;
  }
}

#activity {
  $activity-avatar: 24px;
  $activity-avatar-space: 5px;
  $activity-indent: 20px;

  @if $use-gravatars {
    $activity-indent: $activity-indent + $activity-avatar + $activity-avatar-space;
  }

  h3,
  h4 {
    margin: 0 0 $line-height-computed;
    padding-bottom: .2em;
    border-bottom: 1px dotted $gray-600;
    font-size: $font-size-h4;
    font-weight: $font-weight-normal;
  }

  dt {
    &.grouped {
      margin-left: $activity-indent;
    }

    &.me .time {
      border-bottom: 1px solid $gray-400;
    }

    .time {
      color: $gray-700;
    }

    @if $use-gravatars {
      .gravatar {
        top: 0;
        margin-top: -2px;
        margin-right: $activity-avatar-space;
        float: left;
      }
    }
  }

  dd {
    overflow: hidden;
    font-size: $font-size-small;

    &.grouped {
      margin-left: $activity-indent;
    }
  }
}

#search-results-counts {
  float: right;

  ul {
    @extend %clearfix;
  }

  li {
    margin-left: 1em;
    float: left;
    list-style-type: none;
  }
}


// Search form

#search-form {
  margin-bottom: $line-height-computed;

  input,
  select {
    margin-right: 5px;
    margin-bottom: $line-height-computed / 2;
  }

  label {
    @include check-inline;
    line-height: $input-height-base;

    input[type="checkbox"],
    input[type="radio"] {
      margin-top: $check-input-margin-btn-v;
    }
  }

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


// Search results highlight

.highlight {
  background-color: saturate(shade($yellow, 100), 25%);
  color: saturate(shade($yellow, 800), 25%);

  &.token-1 {
    background-color: saturate(shade($red, 100), 25%);
    color: saturate(shade($red, 800), 25%);
  }

  &.token-2 {
    background-color: saturate(shade($green, 100), 25%);
    color: saturate(shade($green, 800), 25%);
  }

  &.token-3 {
    background-color: saturate(shade($blue, 100), 25%);
    color: saturate(shade($blue, 800), 25%);
  }
}
