@layer layouts {
  /*
   * Search
   */
  
  .search {
    .search-header {
      background-color: var(--color-grey-050);
      border-bottom: 1px solid var(--color-grey-100);
      padding-bottom: 2.5rem;
      padding-top: 5rem;
  
      @media (max-width: 991.98px) {
        padding-bottom: 2rem;
        padding-top: 4rem;
      }
  
      @media (max-width: 639.98px) {
        padding-bottom: 1.5rem;
        padding-top: 3rem;
      }
    }
  
    .search-form {
      @media (max-width: 639.98px) {
        margin-top: 1rem;
      }
  
      .search-input {
        background-color: var(--color-white);
        background-image: url("/assets/icon-search-flip-3565fe99.svg");
        background-position: right 1.25rem center;
        background-repeat: no-repeat;
        padding-left: 1rem;
        padding-right: 2.75rem;
        border-radius: 1.5rem;
      }
    }
  
    .search-results {
      padding: 2.5rem 0 5rem 0;
  
      @media (max-width: 991.98px) {
        padding: 2rem 0 4rem 0;
      }
  
      @media (max-width: 639.98px) {
        padding: 2rem 0 3rem;
      }
  
      h2 {
        display: inline-block;
        margin-bottom: 1rem;
      }
  
      h4 {
        color: var(--color-grey-900);
        margin-bottom: 1rem;
      }
  
      .search-result-word-type {
        color: var(--color-grey-600);
        font-size: .75rem;
        font-style: italic;
        padding-left: .25rem;
      }
  
      h2 {
        .search-result-word-type {
          font-size: 1rem;
        }
      }
  
      .search-result-forms {
        color: var(--color-grey-600);
        font-size: .75rem;
        font-style: italic;
        padding-left: .5rem;
      }
  
      .search-result-translation {
        margin-left: 2rem;
      }
  
      .search-result-translation-item {
        margin-bottom: .5rem;
  
        .search-result-word-type {
          margin-right: .25rem;
        }
      }
  
      .search-result-translation-example {
        font-size: .875rem;
        margin-bottom: 2rem;
        margin-left: 2rem;
      }
  
      .search-result-translation-example-target {
        display: block;
      }
  
      .search-result-translation-example-fluent {
        color: var(--color-grey-500);
      }
  
      .search-result-example {
        margin-bottom: .5rem;
      }
  
      .search-result-example-translation {
        font-size: .875rem;
  
        &:first-of-type {
          margin-left: .25rem;
        }
  
        &:after {
          color: var(--color-grey-600);
          content: '·';
          padding: 0 .75rem;
        }
  
        &:last-of-type {
          &:after {
            content: '';
          }
        }
      }
  
      .dash {
        color: var(--color-grey-600);
        margin: 0 .5rem;
      }
    }
  }
}