.search-wrapper
  padding-bottom: 32px
  width: 100%
  border-radius: $border-card-s
  >.search-form
    position: sticky
    top: 0
    height: 40px
    display: flex
    flex-direction: row
    align-items: center
    padding: 0 16px
    gap: 16px
    transition: 0.38s ease-out
    z-index: 1
    border-radius: $border-card-s
    color: var(--text)
    >*
      z-index: 1
    &:before
      position: absolute
      content: ''
      height: 1px
      bottom: 0
      left: 1rem
      right: 1rem
      border-radius: $border-bar
      background: var(--leftbar-search-line, var(--bg-a100))
      :root[data-theme="dark"] &
        background: var(--leftbar-search-line, var(--bg-a20))
      :root:not([data-theme]) &
        @media screen and (prefers-color-scheme: dark)
          background: var(--leftbar-search-line, var(--bg-a20))
      z-index 0
      trans1 all
    &:after
      position: absolute
      content: ''
      height: 2px
      bottom: 0
      left: 1rem
      right: 1rem
      border-radius: $border-bar
      background: convert(hexo-config('style.gradient.searchbar'))
      background-size: 200%
      animation: search-glow 20s linear infinite
      opacity: 0
      pointer-events: none
      z-index 1
      trans1 opacity, 0.3s
    &:hover,&:has(input:focus),&:has(input:not(:placeholder-shown))
      &:after
        opacity: 1
  .search-input
    -webkit-appearance: none
    appearance: none
    width: 100%
    box-sizing: border-box
    font-family: $ff-body
    font-size: $fs-14
    padding: 12px 0
    color: var(--text)
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration
      -webkit-appearance: none
    &::placeholder
      color: var(--text-p3)
      :root[data-theme="dark"] &
        color: var(--text-p2)
      :root:not([data-theme]) &
        @media screen and (prefers-color-scheme: dark)
          color: var(--text-p2)
  .search-button 
    border-radius: $border-bar
    display: flex
    align-items: center
    justify-content: center
    flex-shrink: 0
    width: 1.5rem
    height: 1.5rem
    cursor: pointer
    svg
      height: 1rem
      width: 1rem
      color: var(--text-p2)
      fill: currentColor
      path[p-id="1562"]
        color: var(--theme)
    
  &[searching='true']
    .search-button
      path[p-id="1562"]
        color: $c-green
  &.noresult[searching='true']
    .search-button
      path[p-id="1562"]
        color: $c-red

  .search-no-result
    display: none
    color: var(--text-p1)
    text-align: center
    font-size: $fs-14
    padding: 2rem
    margin: 8px 0
    background: var(--bg-a20)
    border-radius: $border-card-s


  #search-result
    max-height: 60vh
    overflow: auto
    scrollbar-width: none
    scrollbar(0, 0)
    border-radius: $border-bar
    mask: linear-gradient(white, 90%, transparent)
    -webkit-mask: linear-gradient(white, 90%, transparent)
    &:empty
      display: none
    .search-result-list
      padding: 0
      margin: 8px 0
      list-style-type: none
    li a
      display: block
      background: var(--ui-adapter-bg-hover)
      box-shadow: var(--ui-adapter-shadow-hover)
      line-height: 1.2
      padding: 0.75rem 1rem
      border-radius: $border-card-s
      &:focus-visible
        outline: 2px solid var(--theme)
        outline-offset: 2px
    li+li
      margin-top: 8px
    .search-result-title
      display: block
      overflow: hidden
      color: var(--text-p1)
      font-size: $fs-14
      padding: 0.5rem 1rem
      white-space: nowrap
      text-overflow: ellipsis

    .search-result-section
      display: block
      overflow: hidden
      color: var(--text-p1)
      font-weight: 700
      font-size: $fs-15
      text-overflow: ellipsis
      white-space: nowrap
      border-bottom: 1px solid var(--block-border)
      padding-bottom: .5rem
      margin-bottom: .5rem
      &:before
        content: '>'
        margin-right: .5em
        color: var(--theme)

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

    .search-keyword
      color: $c-yellow
      border-bottom: 1px dashed $c-yellow
      font-weight: bold
      filter grayscale(25%)


.search-wrapper.noresult[searching='true']
  .search-no-result
    display: block
    margin-bottom: 8px

.leftbar-container > .search-wrapper
  width: auto
  margin: 1.5rem var(--gap-base) 0
  padding-bottom: 0

.leftbar-container > .search-wrapper[searching='true']
  flex-grow: 1
  min-height: 0
  display: flex
  flex-direction: column
  #search-result
    flex-grow: 1
    max-height: none

@keyframes search-glow
  from
    background-position: 0%
  to
    background-position: 1000%