$svg-color = #b1b2b3
$svg-hover-color = #9b9b9b

@import './styles/ext.styl'
@import './styles/ask.styl'

#search-container
  position relative
  overflow auto
  position fixed
  width 100%
  height 100%
  left 0
  top 0
  z-index 200
  background-color $search-container-color

  .sub-navbar, .result-wrap
    width 80%
    max-width 960px
    margin 0 auto

    .search-wrap
      width 100%
      display inline-block
      vertical-align middle
      position relative

    .input-wrap
      margin-top 24px
      position relative
      display flex
      align-items center
      box-sizing border-box

      .search-input-btn
        display flex
        flex-direction column
        justify-content center
        padding 0
        font-size 0
        background-color #fff

        button
          width 40px
          font-family inherit
          font-size 100%
          margin 0
          outline 0
          background-color transparent
          padding 0
          border-width 0
          vertical-align middle
          cursor pointer

          svg
            fill $svg-color

            &:hover
              fill $svg-hover-color

      .search-input
        width 100%
        height 56px
        font-size 16px
        border none
        box-sizing border-box
        outline none
        padding 1px 10px
        border-radius 4px

      .search-input-btn
        height 56px

      .search-back__btn
        display block !important
        font-size 17px
        color #576b95
        line-height 24px
        padding 10px 16px
        white-space nowrap
        /* position absolute
        right -65px */

    .search-category
      .navbar
        border none

      .main-navbar
        box-shadow none

      .main-navbar-links
        width 100%
        padding 0

        @media (max-width 630px)
          &
            white-space normal !important

        .main-navbar-item
          @media (max-width 1070px)
            &
              padding 0 2%

          @media (max-width 900px)
            &
              padding 0 1%

  .result-number
    display flex
    justify-content center
    align-items center
    padding-top 20px
    font-size 20px
    
    .uni-loading
      width 27px
      height 27px

    .DocSearch-Logo
      font-size 16px
      vertical-align middle
      display inline-block

  .search-result
    box-sizing border-box

    .result-wrap
      ul
        list-style none
        margin 0
        padding 0

  .algolia-logo
    display flex
    justify-content center
    padding 10px 0 20px

  .search-more
    display block
    text-align center
    padding 10px 0
    color inherit
    cursor pointer

    &:hover
      color $accentColor

@media (max-width $MQMobile)
  #search-container
    .search-navbar-header>.main-navbar
      display none !important

    .search-navbar>.navbar, .search-category>.navbar
      line-height 3rem
      height auto
      position static !important

    .sub-navbar, .result-wrap
      width 100% !important

    .input-wrap
      padding-left 5px
      margin-top 5px !important

      .search-input, .search-input-btn
        height 32px !important

    .search-result
      padding 0 10px

    .search-result-aside
      display none