// Open Opps - Search layout

@import "../base-shared";

.usajobs-open-opps-search-results {
  margin-top: $size-default;

  @include media($L) {
    margin-top: $size-M;
    display: flex;
    flex-wrap: wrap;
  }

  .usajobs-open-opps-opportunity {
    margin-left: 0;
    margin-right: 0;

    @include media($L) {
      flex: 1 0 calc(50% - 15px);
      margin-right: $size-default;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }

    // Fade the description in search results.
    // Ideally we'd truncate on the way out of the server or
    // ask the user to enter a brief description that would not be truncated.
    &__desc {
      position: relative;
      max-height: #{$base-line-height * 8}em; // use this to control the number of lines
      overflow: hidden;
    }

    &__desc:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      text-align: right;
      width: 70%;
      height: #{$base-line-height}em;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1) 50%
      );
    }
  }
}