index.styl

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

#search-container
  overflow auto
  position fixed
  width 100vw
  height 100vh
  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

    .search-category
      .navbar
        border none

      .main-navbar
        box-shadow none

      .main-navbar-links
        width 100%
        padding 0

        .main-navbar-item
          padding 0 6%

  .result-number
    display flex
    justify-content center
    margin-top 20px
    font-size 20px

  .search-result
    box-sizing border-box

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

@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