@import '../../../utils'

#root
  --search-height: 30px
  --search-border-radius: var(--general-border-radius)
  --search-font-size: rem(16)
  --search-shadow: 0 1px 2px 0 var(--s-toolbar-border)
  --search-icon-width: 28px
#root[data-density="loose"]
  --search-icon-width: 30px
#root[data-density="compact"]
  --search-height: 28px
  --search-font-size: rem(15)
  --search-icon-width: 26px
#root[data-theme="plain"]
  --search-shadow: var(--frame-el-shadow)

.SearchBar
  position: relative
  display: flex
  justify-content: center
  align-items: center
  flex-shrink: 0
  cursor: text
  opacity: 1
  overflow: hidden
  z-index: 201
  height: calc(var(--search-height) + var(--general-margin))
  padding: 0 0 var(--general-margin)
  background-color: var(--frame-bg)
  &:before
    content: ''
    position: absolute
    top: 0
    left: var(--general-margin)
    width: calc(100% - var(--general-margin) * 2)
    height: calc(100% - var(--general-margin))
    border-radius: var(--search-border-radius)
    background-color: var(--toolbar-bg)
    box-shadow: var(--search-shadow)
  &[data-showed="false"]
    opacity: 0
    height: 0
    padding: 0
    z-index: 0
    margin-bottom: 0
  &[data-focused="true"]:before
    box-shadow: inset 0 0 0 1px var(--accent)

.SearchBar .search-icon
  position: relative
  display: flex
  justify-content: center
  align-items: center
  flex-shrink: 0
  width: var(--search-icon-width)
  height: 100%
  > svg
    position: relative
    width: 16px
    height: 16px
    fill: var(--toolbar-fg)
    opacity: .6
    transition: opacity var(--d-fast)
    margin: 0 0 0 var(--general-margin)
.SearchBar[data-active="true"] .search-icon > svg
  opacity: 1

.SearchBar .input
  position: relative
  flex-grow: 1
  height: 100%
  width: 100%
  margin: 0
  padding: 0
  border: none
  outline: none
  overflow: hidden
  font-size: var(--search-font-size)
  background-color: #00000000
  color: var(--toolbar-fg)

.SearchBar .placeholder
  position: absolute
  left: var(--search-icon-width)
  width: 100%
  padding: 0
  font-size: var(--search-font-size)
  color: var(--toolbar-fg)
  opacity: .7
  transition: opacity var(--d-fast), transform var(--d-fast)
.SearchBar:hover .placeholder
  opacity: 1
.SearchBar[data-focused="true"] .placeholder
  opacity: .7
  transform: translateX(3px)
.SearchBar[data-filled="true"] .placeholder
  opacity: 0
  transform: translateX(16px)

.SearchBar .clear-btn
  position: relative
  display: flex
  justify-content: center
  align-items: center
  width: 28px
  height: 100%
  cursor: pointer
  flex-shrink: 0
  transition: opacity var(--d-fast)
  > svg
    position: relative
    width: 18px
    height: 18px
    fill: var(--toolbar-fg)
    opacity: .7
  &:before
    content: ''
    position: absolute
    top: calc(50% - 9px)
    left: calc(50% - 9px)
    width: 18px
    height: 18px
    border-radius: var(--search-border-radius)
    background-color: var(--toolbar-fg)
    opacity: 0
  &:hover:before
    opacity: .2
  &:active:before
    opacity: .12
