@import '~assets/styles/variables.sass'

.iciba-main-wrap
  z-index: 9999

  &.m-enter-from
    opacity: 0

    .iciba-main
      transform: translateY(-6px)

  &.m-leave-to
    opacity: 0

  &.m-leave-from, &.m-enter-to
    opacity: 1

.iciba-main
  top: 0
  left: 0
  width: 300px
  letter-spacing: 0
  filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.14)) drop-shadow(0 4px 2.5px rgba(0, 0, 0, 0.15)) drop-shadow(0 1px 5px rgba(0, 0, 0, 0.12))

.input-box
  $input-container-height: 28px

  height: $input-container-height
  z-index: 1

  .iciba-input-box
    .search-input
      letter-spacing: 0
      padding: 0 4px 0 7px
      line-height: $input-container-height - 1
      height: $input-container-height - 1
      z-index: 2

      &:focus
        outline: none

    &.focused::before
      content: ''
      position: absolute
      top: 1px
      left: 1px
      width: calc(100% - 1px)
      height: calc(100% - 1px)
      outline: 2px solid $input-outline-color
      outline-offset: -1px

    .input-button
      $offset: 1px

      height: $input-container-height - $offset
      width: $input-container-height - $offset
      z-index: 2
      opacity: 0.2

      &:hover
        opacity: 0.6

      &:active
        background-position: center calc(50% + 1px)
        opacity: 0.9

  .provider-box
    height: $input-container-height

    .provider-button
      width: $input-container-height
      flex: 0 0 $input-container-height
      height: $input-container-height - 1px
      background-color: $background-level-5

      &:focus
        outline: none

        &::before
          content: ''
          position: absolute
          top: 1px
          left: 0
          width: 100%
          height: calc(100% - 1px)
          outline: 2px solid $input-outline-color
          outline-offset: -1px

      &:last-child:focus
        &::before
          width: calc(100% - 1px)

      &:hover
        background-color: #FCFCFC

      &:active
        background-position: center calc(50% + 1px)
        background-color: $background-level-4
        box-shadow: 0 0 6px #AAA inset

.content-box
  background: $background-level-5
  z-index: 2

  .content-item
    padding: 7px 10px 10px 10px

.stick-box
  right: 0
  top: 0
  transform: translate(100%, 0)
  background: #EEE
  height: 56px
  width: 28px
  background-color: $background-level-5
  transition-duration: 0.1s
  z-index: 0

  &.s-enter, &.s-leave-to
    transform: translate(0, 0)
    transition-delay: 300ms

  &.s-enter-to, &.s-leave
    transform: translate(100%, 0)

  .drag
    cursor: grab
    height: 28px
    width: 28px

  .stick
    height: 28px
    width: 28px

    .i-icon
      transform: rotate(45deg)
      opacity: 0.4

    &.pinned .i-icon
      transform: rotate(0)
      opacity: 1
