@import url('http://fonts.googleapis.com/css?family=Roboto')
.activity-feed-search
  display flex
  justify-content flex-end
  width 100%
  position relative
  margin-right 15px

  &.conversation-icon
    width 60px

  input[type="search"]
    opacity 0
    width 0
    margin 5px 0
    padding 5px 10px
    border none
    background transparent
    outline none
    color #FFFFFF
    font-weight 500
    font-size 16px
    border-bottom 1px solid rgba(255,255,255, 0.3)
    transition all 400ms cubic-bezier(0.0, 0.0, 0.2, 1)

  &.expanded
    input[type="search"]
      opacity 1
      width 100%

    .search-icon
      display none

  .search-icon
    position absolute
    width 20px
    top 6px
    right 0

input::placeholder
  color #FFFFFF
  font-family var(--main-font-family), 'Roboto', Helvetica, sans-serif
  opacity 0.7

.search-clear
  pointer-events none
  position absolute
  top 8px
  right 0
  opacity 0

  &.search-expanded
    pointer-events auto
    opacity 1