// main: ../global.less
body {
    #search-bar {
        background: #fff; 
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0px;
        box-shadow: 0 2px 5px #888;
        display: none;
        #search-form {
            .search-field {
                padding: 5px;
                border: 1px solid #b7b7b7;
                margin: 12px 0;
                color: #7f7f7f;
                text-transform: uppercase;
                display: flex;
                align-items: center;
                height: 2.5em;
                margin-left: 30px;
                margin-right: 30px;
                label {
                    margin: 0;
                }
                input {
                    border: none;
                    padding: 0 10px;
                    width: 300px;
                    max-width: 90vw;
                    height: 2.5em;
                    &::placeholder {
                        text-transform: uppercase;
                    }
                    &:focus {
                        outline: none;
                    }
                }
            }
        }
        i {
            cursor: pointer;
            font-size: 22px;
        }
        #search-bar-close {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    
}