@use './base' as *

// Navigation Variables
$content-width: 1000px
$breakpoint: 799px
$nav-height: 70px
$nav-background: $backgroundTxt
$link-hover-color: Lightgrey 
$nav-background2: url("../inc/bg/christmas-banner-6739203.jpg") 0 86% no-repeat

// Blauer klik Hintergrund entfernen
*:focus 
  -webkit-tap-highlight-color: transparent
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  outline: none !important
    
// Outer navigation wrapper
.navigation
  height: $nav-height
  background: $nav-background2
  border-radius: 0 0 2rem 2rem
  background-size: 100%
  border-bottom: 4px ridge $siteColor
  background-size: 100%

// Logo and branding
.brand
  text-align: left
  position: absolute
  padding-left: 20px
  float: left
  /*line-height: $nav-height
  text-transform: uppercase
  font-size: 1.2em
  font-weight: bold
  text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
  margin: 0.9rem 0 0 3rem 
  a,
  a:visited 
    color: $headerFontColor
    text-decoration: none


// Container with no padding for navbar
.nav-container 
  max-width: $content-width
  margin: 0 auto


// Navigation 
nav
  display: block 
  float: right
  font-weight: bold
  //text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
  padding-right: 1rem 
  margin: 2rem 1rem 0 0
  border-radius: 2rem 
  background: hsl(0,0%,100%,0.7)

  ul 
    list-style: none
    margin:  0
    padding: 0
    background-color: $nav-background
    li 
      float: left
      position: relative
      padding: 0
      
      a,
      a:visited 
        display: block
        padding: 0.5rem 0.5rem
        //line-height: $nav-height
        color: $headerFontColor
        text-decoration: none
        
        &:hover, &:active, &.active
          //background: $link-hover-color
          color: $siteColor
          text-decoration: underline 
          //transform: scale(1.1)
    
        &:not(:only-child):after
          padding-left: 10px
          content: '▾'
        
      // Dropdown list
      ul li 
        min-width: 190px
        a 
          padding: 15px
          line-height: 20px
          
          
        

// Dropdown list binds to JS toggle event
.nav-dropdown 
  position: absolute
  display: none
  z-index: 1
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20)
  margin-top: 4px
  font-weight: bold


/* Mobile navigation */

// Binds to JS Toggle
.nav-mobile 
  display: none
  position: absolute
  top: 0
  right: 0
  height: $nav-height
  width: $nav-height

@media only screen and (max-width: 798px) 
  // Hamburger nav visible on mobile only
  .brand
    margin: 0.9rem 0 0 1rem
  .nav-mobile 
    display: block
  
  nav 
    width: 100%
    padding: $nav-height 0 15px 0
    text-shadow: none 
    margin: 0px
    background: none 
    ul 
      display: none
      border: 4px ridge $siteColor
      border-radius: 2rem
      
      li 
        float: none
        padding-top: 0
        a 
          padding: 15px
          background: none 
          line-height: 15px
        
        ul li a 
          //padding-left: 30px
          
        
  .nav-dropdown
    position: static
    background: none
    border: none
    box-shadow: none
    
  
@media screen and (min-width: $breakpoint) 
  .nav-list 
    display: block !important
  
#nav-toggle 
  position: absolute
  left: 18px
  top: 22px
  cursor: pointer
  padding: 10px 0px 16px 0px
  
  span,
  span:before,
  span:after 
    cursor: pointer
    border-radius: 1px
    height: 5px
    width: 35px
    background: black 
    position: absolute
    display: block
    content: ''
    transition: all 300ms ease-in-out
  
  span:before 
    top: -10px
  
  span:after 
    bottom: -10px
  
  &.active span 
    background-color: transparent
    &:before,
    &:after 
      top: 0
    
    &:before 
      transform: rotate(45deg)
    
    &:after 
      transform: rotate(-45deg)