$navLinkBorder=1px solid #e0e0e0
$emptyBorder=1px solid transparent
$minHeight=500px

.g-global-nav-main
  box-shadow inset -1px 0 0 #eee
  background-image linear-gradient(to left, #f4f4f4 0%, #fff 7px)
  min-height $minHeight - 12px
  padding 15px 0 20px 6px
.g-global-nav-fade
  height 12px
  box-shadow inset -1px 0 0 #f5f5f5
  background-image linear-gradient(to left, #f4f4f4 0%, #fff 4px)

.g-nav-link
  display block
  line-height 1.9
  font-size 17px
  color #4a4a4a
  padding-left 12px
  i
    color #888
    margin 3px

ul.g-global-nav
  padding-left 0

  >li
    border $emptyBorder
    list-style-type none
    text-decoration none

  >li:hover:not(.g-active)
    background-color #fafafa
    .g-nav-link
      position relative
      color #222
    i
      color #333

  >li.g-active
    pointer-events none
    cursor default
    background-color white
    border-top $navLinkBorder
    border-bottom $navLinkBorder
    border-left $navLinkBorder
    box-shadow -1px 1px 3px rgba(0,0,0,0.05)
    .g-nav-link
      color black
    i
      color black

@media (max-width: 720px)
  .g-nav-link
    display inline-block
    padding 0 10px 0 6px

  ul.g-global-nav
    width 100%
    border-bottom $navLinkBorder
    >li
      display inline-block
      padding 4px 5px
      border $emptyBorder
    >li.g-active
      box-shadow none
      border-bottom $emptyBorder
      border-left $navLinkBorder
      border-right $navLinkBorder
      border-top $navLinkBorder
    >li:not(.g-active)
      background-color #f1f1f1

@media (min-width: 721px)
  ul.g-global-nav
    >li:hover:not(.g-active)
      .g-nav-link:after
        content ""
        position absolute
        width 4px
        top -1px
        bottom -1px
        right -1px
        background-color #ffcc00

@media (max-width: 720px)
  .g-global-nav-main
    padding 0
    box-shadow none
    background-image none
    min-height 0
  .g-global-nav-fade
    display none

