.search-toggle{
    display: flex;
    flex-direction: row-reverse;
    transition: background-color .4s ease-out;
    border-radius: 100px;
}

.search-toggle .close{
    display: none;
}

.search-toggle.expanded{
    background: #fff;
}

.search-toggle .mag-glass{
    transition: filter .4s ease-out;
}

.search-toggle.expanded .mag-glass{
    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(98%) contrast(105%);
}

.search-toggle button{
    cursor: pointer;
    background: none;
    border: 0;
}

.search-toggle form{
    opacity: 0;
    transition: opacity .4s ease-out;
}

.search-toggle.expanded form{
    opacity: 1;
}

.search-toggle button[type="submit"]{
    display: none;
}

.search-toggle input{
    background: transparent;
    color: #000;
    border: 0;
    pointer-events: none;
    padding: 8px 0;
    font-size: 18px;
    margin: 0 20px;
}

.search-toggle.expanded input{
    pointer-events: all;
}

.search-toggle input:focus{
    outline: none;
}