@use '../base/utils'

search-box > .search-container
    min-width: 300px
    border-style: solid
    border-color: #656565
    height: 48px
    border-radius: 24px 24px
    border-width: 1px
    display: grid
    margin: 0 auto
    grid-template-columns: 45px auto 45px
    transition: all 0.8s ease

search-box .search-icons
    border-top-left-radius: 24px
    border-bottom-left-radius: 24px
    text-align: center
    font-size: 20pt
    width: 100%
    height: 100%

search-box .search-icons > span
    display: inline-block
    margin: calc(24px - 10pt) auto auto
    color: #000

search-box .search-input 
    border-style: unset
    font-family: 'Quicksand', sans-serif

search-box .submit
    border-top-right-radius: 24px
    border-bottom-right-radius: 24px
    font-size: 20pt
    border-style: unset
    background-color: rgba(0, 0, 0, 0)
    transition: background-color 0.5s ease

search-box .submit > i
    display: inline-block
    color: #000
    vertical-align: middle

search-box .submit:hover
    background-color: utils.$base_color
    i
        color: #fff