@import '~sass/utils'

.Searchbar
    height: 100%
    width: 100%
    transition: opacity .3s ease
    display: inline-block
    border: none
    line-height: inherit
    background: inherit
    color: inherit
    border-radius: inherit
    text-align: inherit
    padding-left: 16px

    &:focus::-webkit-input-placeholder
        transition: opacity 0.5s ease
        opacity: 0


/*
    .Icon
        line-height: inherit
        display: inline-block
        padding: 6px 16px

        &.search
            color: inherit

        &.close
            position: absolute
            right: 0
            color: #d55250

    font-family: font-for(Searchbar)
    line-height: 100%
    display: flex
    align-items: center
 */

@import '~sass/utils'

.Searchbar
    height: 100%
    width: 100%
    transition: opacity .3s ease
    display: inline-block
    border: none
    line-height: inherit
    background: inherit
    color: inherit
    border-radius: inherit
    text-align: inherit
    padding-left: 16px
    backface-visibility: hidden

    &:focus::-webkit-input-placeholder
        transition: opacity 0.5s ease
        opacity: 0


/*
    .Icon
        line-height: inherit
        display: inline-block
        padding: 6px 16px

        &.search
            color: inherit

        &.close
            position: absolute
            right: 0
            color: #d55250

    font-family: font-for(Searchbar)
    line-height: 100%
    display: flex
    align-items: center
 */

Add backface visibility to SearchBar
fix(component): Add backface visibility to SearchBar
