lightspeeddevelopment/lsx-customizer

#masthead {
    #searchform {
        display: inline-block;
        line-height: 1;
        order: 2;
        position: absolute;
        right: 15px;
        //top: 11px;
        transition: all 300ms ease-in-out;

        @include media('>=phone') {
            right: 30px;
            //top: 16px;
        }

        @include media('>=desktop') {
            right: 15px;
            //top: 21px;

            &:hover,
            &:active,
            &:active:hover,
            &:focus {
                .search-field {
                    opacity: 1;
                    width: 290px;
                    z-index: 999;
                    min-width: 30rem;
                }

                .search-submit {
                    cursor: pointer;
                    z-index: 9999;
                    border: none;
                }
            }
        }
        @include media('<desktop-wide') {
            height: calc( 100% - 43px );
            display: flex;
            align-items: center;
        }
        @include media('<desktop') {
            &.hover {
                .search-field {
                    opacity: 1;
                    width: 290px;
                    z-index: 999;
                    min-width: 30rem;
                }

                .search-submit {
                    cursor: pointer;
                    z-index: 9999;
                }
            }
        }

        .input-group { display: inline-block; }

        .input-group-btn { width: auto; }

        .search-field {
            border: 0 none;
            font-size: 14px;
            height: auto;
            opacity: 0;
            padding: 10px;
            position: absolute;
            right: 0;
            transition: all 400ms ease-in-out;
            width: 10px;

            @include media('>=desktop') {
                &:hover,
                &:active,
                &:focus {
                    opacity: 1;
                    width: 290px;
                    z-index: 999;
                    min-width: 30rem;
                }
            }
        }

        .search-submit {
            background: none;
            box-shadow: none;
            height: auto;
            line-height: 1;
            padding: 15px 10px;
            z-index: 999;
            border: none;
            .fa {
                vertical-align: middle;
                font-size: 20px;
                line-height: 1;
                transition: all 300ms ease;
            }

            &:active {
                box-shadow: none;
                left: 0;
                top: 0;
            }
        }
    }
    .mobile-header-hamburger & {
        #searchform {
            @include media('<desktop-wide') {
                display: none;
            }
        }
        .navbar-header {
            #searchform {
                display: flex;
                right: initial;
                position: relative;
                order: 1;
                flex-basis: 25%;
                margin-left: -50px;
                @include media('>=desktop-wide') {
                    display: none;
                }
                .search-field {
                    right: initial;
                    left: 10px;
                    padding-left: 40px;
                }
            }
        }
    }
}

#primary,
#secondary {
    #searchform {
        text-align: center;
        padding: 10px;
        .search-field {
            z-index: 2;
            margin-left: 0px;
            height: 60px;
            border-radius: 2px 0 0 2px;
            float: none;
            padding: 8px 14px 10px;
            @include media('>=tablet') {
                min-width: 400px;
            }
        }

        .search-submit {
            z-index: 1;
            padding-left: 20px;
            padding-right: 25px;
            height: 59px;
            margin-left: -3px;
            &:active {
                left: 0;
                top: 0;
            }
        }
    }
}