/* Dropdown menu in header */

#header {
    
    .dropdown {
    @include vendor('flex', '1');
    border-left: solid 1px _palette(border);
    height: inherit;
    line-height: inherit;
    margin-left: _size(section-spacing-small); 
        li {
            position: relative;
            float: left;
            text-transform: uppercase;
            font-size: 14pt;
            height: inherit; 
            a {
                font-family: _font(family-heading);
                font-size: 0.7em;
                font-weight: _font(weight);
                letter-spacing: 0.20em;
                border-bottom: none;
                padding: 0 0.8rem;
                
            }
            ul {
                position: absolute;
                top: 100%;
                margin: 0;
                padding: 0;
                list-style: none;
                @include vendor('display', 'none');
                line-height: normal;
                background-color: _palette(bg-dropdown);
                box-shadow: 0 0.05rem 1rem _palette(border-dropdown) !important;
                
                li {
                    
                    a {
                    font-family: _font(family-heading);
                    font-size: 0.7em;
                    font-weight: _font(weight);
                    letter-spacing: 0.20em;
                    text-transform: uppercase;
                    border-bottom: none;
                    padding: 0.3rem 0.8rem;
                    line-height: 2.5em; 

                    &:hover {
                        color: #181818;
                        }
                    }   
                    ul {
                        left: 100%;
                        top: 0;
                    }
                    
                }
            }
            
        }
        ul {
            li {
    
                margin-left: 0.5em;
                padding-left: 0.5em;

                &:first-child {
                    border-left: 0;
                    }
                // &:hover>a {
                //     color: #181818 !important;
                //     padding: 0.5rem 0.8rem;
                // }
                &:hover>ul {
                    @include vendor('display', 'flex');
                    @include vendor('flex-direction', 'column');
                    @include vendor('flex-wrap', 'nowrap');
                    min-width: 15em;
                    border: solid 1px rgba(160, 160, 160, 0.3);
                    background-color: _palette(bg);
                    box-shadow: 0 0.05rem 1rem _palette(border-dropdown) !important;
                }
                
            }
        }
    }
    @include breakpoint('<=medium') {
        .dropdown {
            display: none; 
            } 
        }
    @include breakpoint('<=small') {
        .dropdown {
            margin-left: -1rem;
            margin-right: -1rem; }
        .dropdown .fixed {
            margin: 0; } }
}