section.search-results {
  border-radius: 3px;
  @include clearfix;

  div.result-stats, div.results-context {
    margin: 15px $base-padding 0 $base-padding;

    @include media($mobile) {
      margin-left: $base-padding-mobile;
    }

    &, a {
      font-size: $base-font-size-small-1;
      color: $base-font-color-2;
    }
  }

  div.dropdown.sort-order {
    display: inline-block;
    margin-left: 20px;
    position: relative;

    @include media($mobile) {
      display: block;
      margin-left: 0;
    }

    .dropdown-menu {
      @extend %dropdown-menu;
      margin-left: 32px;

      a {
        color: lighten($base-font-color, 5%);
      }
    }

    &::after {
      height: 0;
      width: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 4px;
      border-top-color: $base-font-color-2;
      position: absolute;
      content: "";
      right: -12px;
      top: calc(50% - 2px);
    }

    &.open {
      .dropdown-menu {
        display: block;
      }

      &::after {
        border-top: none;
        border-bottom-color: $base-font-color-2;
      }
    }
  }

  div.pagination {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.1);
    margin: 0;
  }
}

ol.results-list {
  margin: 2em 0 3em;
  padding: 0 $base-padding;

  @include media($mobile) {
    padding: 0 15px;
  }

  li {
    list-style-type: none;
    margin-bottom: 23px;
  }

  h3 {
    font-size: $base-font-size + 1;
    font-weight: 600;
    line-height: 1.2em;
    margin: 0;

    a {
      color: saturate(darken($base-link-color-1, 5%), 100%);

      &:hover {
        color: darken($base-link-color-1, 5%);
      }

      &:visited {
        color: #A42DDF;
      }
    }
  }

  div.metadata {
    color: lighten($base-font-color, 7%);
    margin-top: 5px;

    div {
      font-size: $base-font-size-small-1;
      font-weight: 600;
      margin-right: 20px;
      line-height: 1.4em;

      a {
        text-decoration: none;

        &:hover {
          color: $base-font-color;
          text-decoration: underline;
        }
      }
    }

    div.date-received {
      display: inline-block;
      vertical-align: top;
    }

    span.on_behalf_of {
      font-weight: normal;
    }

    div.sender-receiver {
      display: inline-block;

      span {
        display: inline-block;
        font-style: italic;
        overflow: hidden;
        margin: 0 .25em;
      }

      a {
        display: inline-block;
        font-style: italic;
        max-width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.sender {
          color: #D46969;
        }

        &.receiver {
          color: #69AC6F;
        }
      }
    }

    ol.excerpt {
      font-size: $base-font-size-small-1;
      font-weight: normal;
      margin: 0;
      padding: 0;

      li {
        list-style: none;
        margin: 0;
      }

      b {
        font-weight: 600;
        color: $base-font-color-2;
      }

      em {
        color: $base-font-color;
        font-weight: 700;
        font-style: normal;
      }
    }

    div.topic {
      $color: lighten($base-font-color-2, 10%);
      color: $color;
      display: inline-block;
      font-size: $base-font-size-small-2 - 1;
      font-weight: 600;
      margin-top: 3px;
      opacity: 0.7;
      text-transform: uppercase;
      @include transition(all 0.08s);

      &:hover {
        opacity: 1;
      }

      a {
        color: $color;
        margin-left: 2px;
        white-space: nowrap;

        &:first-child {
          margin-left: 0;
        }

        &:hover {
        color: $base-font-color-2;
        }
      }
    }

    span.arrow {
      display: inline-block;
      vertical-align: top;
      margin: 0 10px;
      position: relative;
      top: 5px;

      img {
        display: block;
      }
    }
  }
}
