/* ===================================================
/* NAVIGATION
/* ===================================================

// ====================================
// NAVIGATION
// ====================================
=create-nav
  position: relative
  display: flex
  flex: 1
  flex-direction: column
  width: 100%
  min-height: $navig-min-height
  height: auto
  margin: 0
  padding: 0
  background: $navig-color-background
  border-bottom: 1px solid $navig-color-border
  box-shadow: 0 1px 3px rgba($color-dark, 0.1), 0 1px 6px rgba($color-dark, 0.05)  
  // Elements
  // --- TOGGLER --- //
  > input[type='checkbox']
    // @NOTE: Must be checkbox and have an id equivalent to nav-toggle's "for" attribute
    display: none
    height: 60px
    // Pseudo
    &:checked ~ .nav-menu
      display: flex
      height: auto 
    &:checked ~ .nav-toggle
      color: rgba(0, 0, 0, 1.0)
      border-color: rgba(0, 0, 0, 1.0)
  .nav-toggle
    // @NOTE: Must make sure label is set up: <label for="[insert_name]" class="nav-toggle"></label>
    //        The label with class 'nav-toggle' must also be placed AFTER the checkbox.
    position: absolute
    top: $navig-spacing / 2
    right: $navig-spacing / 2
    margin-left: auto
    padding: $navig-padding / 2
    color: rgba(0, 0, 0, 0.3)
    border: 1px solid rgba(0, 0, 0, 0.3)
    border-radius: $border-radius
    // Pseudo
    &::before
      content: '\2630  Menu'
      font-weight: 400
    &:hover
      color: rgba(0, 0, 0, 0.7)
      border-color: rgba(0, 0, 0, 0.7)
      cursor: pointer
  
  //--- BRAND ---
  &-brand
    display: flex
    align-items: center
    padding: $navig-padding
    font:
      size: $navig-brand !important
      weight: 700
    color: $font-color !important
    text-decoration: none
    // Elements
    img,
    &-img
      height: 4.0rem
  
  //--- MENU ---
  &-menu
    display: none
    flex-direction: column
    width: 100%
    list-style: none
    // Elements
    &-item
      // Elements
      > a:not(.button)
        display: block
        padding: $navig-padding
        color: rgba($navig-font-color, $navig-font-opacity)
        text-decoration: none !important
        cursor: pointer
      // Pseudo
      &:hover
        background: darken($navig-color-background, $navig-font-opacity-hovered)
        // Elements
        & > a
          color: rgba($navig-font-color, $navig-font-opacity-hovered)
      // Modifiers
      &.make-active
        // Elements
        > a
          font-weight: $font-weight-bold
          color: rgba($navig-font-color, $navig-font-opacity-hovered)
      &.make-special
        background: map-get($color-map, primary)
        // Elements
        > a
          color: #FFFFFF
        // Pseudo
        &:hover
          background: darken(map-get($color-map, primary), $darken)
          // Elements
          > a
            color: #FFFFFF
      // Modifiers
        &.make-right
          margin-left: 0
    // Modifiers
    &.make-fixed
      position: fixed
      box-shadow: 0 0 7px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.05)
      z-index: $index-higher // z-index: 10
  
  // Media Query
  @media screen and (min-width: $bp-large)
    flex-direction: row
    align-items: stretch
    // Elements
    //--- TOGGLER ---
    &-toggle
      display: none
    //--- BRAND ---
    &-brand
      display: flex
      flex:
        grow: 0
        shrink: 0
        basis: auto
      align-items: center
      padding: 0 $navig-padding
    //--- MENU ---
    &-menu
      display: flex
      flex-direction: row
      align-items: center
      width: auto
      margin-bottom: 0 !important
      // Elements
      &-item
        // Pseudo
        &:hover
          background: $color-none
          // Elements
          > a
            color: rgba($navig-font-color, $navig-font-opacity-hovered)
      // Modifiers
      &.make-right
        margin-left: auto

// ====================================
// NAVIGATION
// ====================================
.nav
  +create-nav