#global-search {
    position: relative;
    width: 12em;
    z-index: 2;
}

#global-search-wrapper {
    position: absolute;
    top:-0.25em;
    width: 100%;
}

#global-search-spinner {
    background-image: url('https://design-mastersuite-static-images.us-east-1.linodeobjects.com/loader.gif');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 6em;
    height: 6em;
}

#global-search input[type=text] {
    width: 100%;
    background-color: #f7f7f7;
    border: 1px solid #e5e5e5;
    padding: 0.6em 1em 0.6em 3em;
    background-image: url('https://design-mastersuite-static-images.us-east-1.linodeobjects.com/global-search.svg');
    background-repeat: no-repeat;
    background-position: 0.8em center;
    background-size: 1.5em;
    border-radius: 0.25em;
}

    #global-search input[type=text]::placeholder {
        color: #b4b4b4;
    }

    #global-search .bi {
        color: red;
        background-color: green;
    }

#global-search input[type=text]:focus,
#global-search input[type=text]:active {
    background-color: #ffffff;

    border-radius: 0;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

/* search results */

#global-search-results {
    display: none;
    background-color: #fff;
    padding: 0.5em;

    border-radius: 0;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}

#global-search-results ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    #global-search-results ul li {
    }

    #global-search-results ul li a {
        display: block;
        padding: 1em;
        text-decoration: none;
        color: #777;
        border-bottom:1px solid #ddd;
    }

        #global-search-results ul li:last-child a {
            border-bottom: none;
            border-radius: 0;
            border-bottom-left-radius: 0.6em;
            border-bottom-right-radius: 0.6em;
        }

    #global-search-results ul li a:hover {
        background-color: #eeeeee;
        color: #222;
    }

/* focused state */
#global-search.focused {
    width: 50em;
}

#global-search.focused #global-search-wrapper {
    border-radius: 1em;
    box-shadow: 0 0 2em rgba(0,0,0,0.2);
}

#global-search.focused #global-search-results {
    display: block;
}