.widgets .widget-wrapper.search
  margin-bottom: 0

.search-wrapper
  width: 100%
  >.search-form
    position: sticky
    top: 1rem
    display: flex
    flex-direction: row
    align-items: center
    transition: 0.38s ease-out
    z-index: 0
  .search-input
    width: 100%
    padding: 0.5rem 0
    line-height: 1.5
    box-sizing: border-box
    font-family: $ff-body
    font-size: $fs-13
    color: var(--text-p0)
    
  
  &.noresult[searching='true']
    .search-icon
      color: $c-red
    .search-form
      border: 1px solid $c-red

  .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-bar

  #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
      color: var(--text-p1)
      font-weight: 700
      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[searching='true']
  .search-no-result
    display: block

.widget-wrapper
  .search-form
    top: 0
    background: var(--card)
    border: 1px solid var(--block-border)
    border-radius: $border-bar
  .search-input
    text-indent: 0.75rem
    padding-right: 2rem
  .search-icon 
    margin: 2px
    position absolute
    right: 0
    pointer-events: none
    color: var(--text-p2)
    padding: 0.5rem
    border-radius: 'calc(%s - 2px)' % $border-bar
    
  #search-result,.search-no-result
    margin-top: 1rem

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