.{$PREFIX}-searchbox
  background: #fff
  font-size: $size4
  color: $color_t1
  display: flex
  align-items: center
  padding: 3px 12px
  &-wrap
    display: flex
    align-items: center
    width: 100%
    min-height: 40px
    border-bottom: 1px solid $color_t3
  &-icon
    flex-shrink: 0
    $icon('search_gray', '.svg')
    width: 30px
    height: 30px
  &-content
    display: block
    width: auto
    min-width: 0
    flex-shrink: 1
    flex-grow: 1
  &-del
    flex-shrink: 0
    width: 30px
    height: 30px
    $icon('component_textfield_delete@3x')
  &-submit
    flex-shrink: 0
    color: $color_main1
  &-active &-wrap
    border-bottom-color: $color_main1
  &-active &-icon
    $icon('search_blue', '.svg')

.{$PREFIX}-searchbox_empty
  color: $color_t3
  font-size: $size4
  text-align: center
  background: convert('url(' + $get_asset('empty@3x') + ')') top no-repeat;
  background-size: 120px
  padding-top: 128px
  margin-top: 44px