.search-wrapper
  width: 100%
  >.search-form
    position: sticky
    top: 1rem
  .search-input
    width: 100%
    padding: 0.75rem 1rem
    line-height: 1
    box-sizing: border-box
    border-radius: $border-block
    background-color: var(--card)
    color: var(--text-p0)
    box-shadow: $boxshadow-button
    trans1 box-shadow
    &:hover
      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.16), 0 0 8px 0px rgba(0, 0, 0, 0.08)
  
  &.noresult 
    .search-input
      &:hover
        box-shadow: 0 0 2px 0px alpha($c-red, 0.2), 0 0 8px 0px alpha($c-red, 0.2)
      &:focus
        box-shadow: 0 0 2px 0px alpha($c-red, 0.5), 0 0 8px 0px alpha($c-red, 0.4)

  .search-no-result
    display: none
    margin: 1em auto
    color: var(--text-p1)
    text-align: center
    font-size: $fs-14
    padding: 2rem
    background: var(--block)
    border-radius: $border-block

  #search-result
    ul.search-result-list
      padding: 0
      margin: 0
      list-style-type: none
    li
      margin: 1em auto
      &:hover
        .search-result-title
          color: $color-hover
    .search-result-title
      background-image: none
      color: var(--text-p1)
      text-transform: capitalize
      font-weight: bold
      line-height: 1.2

    .search-result-content
      overflow: hidden
      color: var(--text-p3)
      margin: .4em auto
      max-height: 13em
      text-align: justify
      font-size: $fs-12
      line-height: 1.2
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 3

    .search-keyword
      border-bottom: 1px dashed $color-hover
      color: $color-hover
      font-weight: bold



.search-wrapper.noresult
  .search-no-result
    display: block

.widget-wrapper
  .search-form
    top: 0
    background: var(--site-bg)
  .search-input
    margin-top: 1rem
    margin-bottom: -1rem
  #search-result,.search-no-result
    margin-top: 2rem

.widget-wrapper:not(:first-child)
  .search-wrapper
    margin-top: -1rem