.c-search-form {
    position: relative;

    &__field {
        height: auto;
        background-color: white;
        box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
        border-radius: .5rem;
        padding: .85rem;
        border: none;
        width: 10rem;
        float: right;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;

        &:hover {
            width: 100%;
        }

        &:focus{
            width: 100%;
        }
    }


    &__label {
        margin-bottom: 0;
    }
    &__button {
        position: absolute;
        right: 0;
        top: 0;
    }
}



.search-query{
    color: $font-color;
    text-shadow: none;
}
.fa-search{
    color:$primary-color-dark;
    background-color: #ddd;
    border-left: 2px solid $primary-color-dark;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.5rem;
    transition: width 0.4s ease-in-out;
    
    &:hover {
        color: $primary-color;
        background-color: darken(#2b2b2b, 10%);
        border-left: 2px solid $primary-color;
        border-right: 2px solid $primary-color;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
        
    }
}
button {
    background-color: darken(#2b2b2b, 10%);
    border: none;
}

.ad-search-form {

    &__field {
        height: auto;
        background-color: white;
        box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
        border-radius: .7rem;
        padding: 1rem;
        border: none;
        margin: 1rem 10%;
        width: 80%;

        &:hover {
        }

        &:focus{

        }
    }
}