.search-dialog
  position fixed
  top 5rem
  left 50%
  z-index 1001
  display none
  margin-left -15rem
  padding 1rem
  width 30rem
  box-shadow var(--efu-shadow-lightblack)
  background var(--efu-card-bg)
  border var(--style-border)
  transition 0.3s
  border-radius 8px
  animation slide-in .6s ease 0s 1 normal none running

  &:hover
    border var(--style-border-hover)
    box-shadow var(--efu-shadow-theme)
    +maxWidth768()
      border none

  +maxWidth768()
    top 0
    left 0
    margin 0
    width 100%
    height 100%
    border 0

  .search-dialog-title
    font-weight 700
    color var(--efu-main)
    padding 0 0 0.7rem
    font-size 1.4em
    line-height 1

  .search-close-button
    position absolute
    top 0.8rem
    right 1rem
    color var(--efu-gray)
    font-size 1.4em
    line-height 1
    cursor pointer
    transition color .2s ease-in-out 0s

    &:hover
      color var(--efu-main)

  #search-results
    max-height calc(80vh - 130px)
    overflow-y auto
    margin-top 8px

    .search-result-item
      padding-left 0
      font-weight 700

      .search-result-title
        position relative
        transition color .2s ease-in-out 0s
        white-space nowrap
        text-overflow ellipsis
        overflow hidden
        display block

        &:hover
          color var(--efu-hovertext)

        em
          color var(--efu-theme)
          font-style normal

    +maxWidth768()
      max-height 80vh !important

  #search-pagination
    .pagination-list
      margin 0.2rem 0 0
      padding 0
      text-align center

      .pagination-item
        color var(--efu-fontcolor)
        display inline-block
        min-width 1.2rem
        height 1.2rem
        text-align center
        line-height 1.2rem
        cursor pointer

        &:hover
          color var(--efu-main)

        &.select
          border-radius 4px
          background var(--efu-main)
          color var(--efu-white)
          cursor default

          &:hover
            color var(--efu-white)

  #search-tips
    padding-top 12px
    color var(--efu-secondtext)
    right 0
    margin auto

    .search-result-count
      color var(--efu-gray)

      b
        color var(--efu-main)

  .search-box
    position relative
    margin 0 auto
    max-width 100%
    width 100%
    padding-top 8px
    padding-bottom 8px

    input
      height 100%
      width 100%
      border-radius 8px
      border var(--style-border)
      padding 0.25rem 0.7rem;
      outline 0
      background var(--efu-secondbg)
      color var(--efu-fontcolor)
      caret-color var(--efu-theme)

      ::placeholder
        color var(--efu-gray)
        opacity .5

#search-mask
  position fixed
  inset 0
  z-index 1000
  display none
  background rgba(0, 0, 0, 0.6)
  backdrop-filter blur(12px)
  -webkit-backdrop-filter blur(12px)
  transform translateZ(0)
  background var(--efu-maskbgdeep)

#search-hits
  .tag-list
    padding 4px 8px
    border-radius 8px
    margin-right 0.5rem
    margin-top 0.5rem
    border var(--style-border-always)

    &:hover
      background var(--efu-main)
      color var(--efu-white)