/*==========================================================================
  Main navigation layout
  ========================================================================== */

/**
  * Navigation base settings
  *
  * 1. Don't let column grow when the width is not entire taken
  */

.navigation
  +flex(flex-start, flex-start)

  >*
    flex: none /* 1 */
    width: column(4)

  /**
    * Navigation list setting
    *
    * 1. Class for the parent link items
    * 2. Class for the children link items
    */

  ul

    padding-left: 0

    /* 1 */
    a.nav-group
      text-transform: uppercase
      font-weight: black()
      color: $blue
      text-decoration: none
      transition: color 0.4s ease

      li
        padding: 0
        margin: 0
        list-style: none
        margin-top: 20px

      &:hover
        color: $darkBlueGreen

    /* 2 */
    ul.nav-children
      a
        text-transform: capitalize
        font-weight: regular()
        color: $blue
        text-decoration: none

        li
          list-style: disc
          margin-left: 20px
          +respond-to-width($smGridBreakpoint)
            margin-left: 0

        &:hover
          text-decoration: underline