//Header slots
.slot-l, 
.slot-r {
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex: 1;
}
.slot-l{
    margin-right: auto;
    justify-content: flex-start;	
}
.slot-c {
    flex-wrap: nowrap;
}
.slot-r {
    margin-left: auto;
    justify-content: flex-end;
}
.flex-item-auto .slot-l,
.flex-item-auto .slot-r{
    flex: auto;
}
.justify-content-center .slot-c{
    justify-content: center;
    display: flex;
}
.header-middle .slot-r,
.header-middle .slot-l,
.header-sticky .slot-r,
.header-sticky .slot-l{
    flex: auto;
}
//Header bottom slots
.header-bottom .slot-c{
    display: flex;
    align-items: center;
}


//Header slots element possition

.slot-r ul + ul,
.slot-r nav + ul,
.slot-r div + ul{
    margin-left: get-navigation-elements-margin('md');
    @include mq('lg') {
        margin-left: get-navigation-elements-margin('md');   
    }
    @include mq('xl') {
        margin-left: get-navigation-elements-margin('lg');   
    }
}
.slot-l ul + ul,
.slot-l nav + ul,
.slot-l div + ul{
    margin-right: get-navigation-elements-margin('md');
    @include mq('lg') {
        margin-right: get-navigation-elements-margin('md');   
    }
    @include mq('xl') {
        margin-right: get-navigation-elements-margin('lg');   
    }
}
.slot-l .megaphone-search{
    margin-right: get-navigation-elements-margin('md');
    @include mq('lg') {
        margin-right: get-navigation-elements-margin('md');   
    }
    @include mq('xl') {
        margin-right: get-navigation-elements-margin('md');   
    }
}
.slot-l > nav > ul > li{
    padding-left: get-navigation-elements-margin('md')/2;
    padding-right: get-navigation-elements-margin('md')/2;
    &:last-child{
        @include margin-reset()
    }
    @include mq('lg') {
        padding-left: get-navigation-elements-margin('md')/2;
        padding-right: get-navigation-elements-margin('md')/2;  
        &:last-child{
            @include margin-reset()
        }
    }
    @include mq('xl') {
        padding-left: get-navigation-elements-margin('lg')/2;
        padding-right: get-navigation-elements-margin('lg')/2;  
        &:last-child{
            @include margin-reset()
        }
    }
}
.slot-r > nav > ul > li,
.slot-r > div > nav > ul > li{
    padding-left: get-navigation-elements-margin('md')/2;
    padding-right: get-navigation-elements-margin('md')/2;
    @include mq('lg') {
        padding-left: get-navigation-elements-margin('md')/2;
        padding-right: get-navigation-elements-margin('md')/2; 
        &:last-child{
            padding-right:0;
        } 
    }
    @include mq('xl') {
        padding-left: get-navigation-elements-margin('lg')/2;
        padding-right: get-navigation-elements-margin('lg')/2;  
        &:last-child{
            padding-right: 0;
        }
    }
}
.slot-c > nav > ul > li{
    padding-left: get-navigation-elements-margin('md')/2;
    padding-right: get-navigation-elements-margin('md')/2;
    @include mq('lg') {
        padding-left: get-navigation-elements-margin('md')/2;
        padding-right: get-navigation-elements-margin('md')/2;  
    }
    @include mq('xl') {
        padding-left: get-navigation-elements-margin('lg')/2;
        padding-right: get-navigation-elements-margin('lg')/2;  
    }
}

.slot-c ul + ul,
.slot-c nav + ul,
.slot-c div + ul{
    margin-left: get-navigation-elements-margin('md');
    @include mq('lg') {
        margin-left: get-navigation-elements-margin('md');   
    }
    @include mq('xl') {
        margin-left: get-navigation-elements-margin('lg');   
    }
}

.slot-r > nav > ul > li:last-child{
    padding-right: 0;
}
.slot-l > nav > ul > li:first-child{
    padding-left: 0;
}
//Header bottom item possitions
.header-bottom{
    .slot-r nav > ul > li{
        padding-left: get-navigation-elements-margin('md')/2;
        padding-right: get-navigation-elements-margin('md')/2;
        @include mq('lg') {
            padding-left: get-navigation-elements-margin('md')/2;
            padding-right: get-navigation-elements-margin('md')/2;  
        }
        @include mq('xl') {
            padding-left: get-navigation-elements-margin('lg')/2;
            padding-right: get-navigation-elements-margin('lg')/2;  
        }
    }
    .megaphone-site-branding + nav,
    .megaphone-site-branding + .d-lg-flex nav {
        margin-left: get-navigation-elements-margin('md');
        @include mq('lg') {
            margin-left: get-navigation-elements-margin('md');            
        }
        @include mq('xl') {
            margin-left: get-navigation-elements-margin('lg');            
        }
    }
    .slot-r ul + ul,
    .slot-r nav + ul{
        margin-left: get-navigation-elements-margin('md');
        @include mq('lg') {
            margin-left: get-navigation-elements-margin('md');            
        }
        @include mq('xl') {
            margin-left: get-navigation-elements-margin('lg');            
        }
    }
    .slot-c nav > ul > li{
        padding-left: get-navigation-elements-margin('md')/2;
        padding-right: get-navigation-elements-margin('md')/2;
        @include mq('lg') {
            padding-left: get-navigation-elements-margin('md')/2;
            padding-right: get-navigation-elements-margin('md')/2;          
        }
        @include mq('xl') {
            padding-left: get-navigation-elements-margin('lg')/2;
            padding-right: get-navigation-elements-margin('lg')/2;          
        }
    }
    .slot-c nav + ul,
    .slot-c ul + ul{
        margin-left: get-navigation-elements-margin('md');
        @include mq('lg') {
            margin-left: get-navigation-elements-margin('md');            
        }
        @include mq('xl') {
            margin-left: get-navigation-elements-margin('lg');            
        }
    }
    .slot-c .megaphone-menu-social{
        margin-left: get-navigation-elements-margin('md');
        @include mq('lg') {
            margin-left: get-navigation-elements-margin('md');            
        }
        @include mq('xl') {
            margin-left: get-navigation-elements-margin('lg');            
        }
    }
}


.header-bottom .slot-c > nav > ul > li:first-child{
    padding-left: 0;
}
.header-bottom .slot-c > nav > ul > li:last-child{
    padding-right: 0;
}

//Header sticky 
.header-sticky-main .slot-c > div > nav > ul > li{
    padding-left: get-navigation-elements-margin('md')/2;
    padding-right: get-navigation-elements-margin('md')/2;
    @include mq('lg') {
        padding-left: get-navigation-elements-margin('md')/2;
        padding-right: get-navigation-elements-margin('md')/2;           
    }
    @include mq('xl') {
        padding-left: get-navigation-elements-margin('lg')/2;
        padding-right: get-navigation-elements-margin('lg')/2;           
    }
}
.header-sticky-main .slot-l > div > nav > ul > li{
    padding-left: get-navigation-elements-margin('md')/2;
    padding-right: get-navigation-elements-margin('md')/2;
    &:last-child{
        @include margin-reset()
    }
    @include mq('lg') {
        padding-left: get-navigation-elements-margin('md')/2;
        padding-right: get-navigation-elements-margin('md')/2;           
    }
    @include mq('xl') {
        padding-left: get-navigation-elements-margin('lg')/2;
        padding-right: get-navigation-elements-margin('lg')/2;           
    }
}
//Specific margins
.megaphone-site-branding + nav,
.megaphone-site-branding + .d-lg-flex nav {
    margin-left: get-navigation-elements-margin('md');
    @include mq('lg') {
        margin-left: get-navigation-elements-margin('md');          
    }
    @include mq('xl') {
        margin-left: get-navigation-elements-margin('lg');          
    }
}