.nav-sub
  .customer-login
    position: relative
    float: left
    top: -2px
    +grid-margin-s($top: .25, $right: .25)
    +grid-height-s(.75)
    +grid-line-height-s(.75)
    border: 2px solid rgba(255,255,255,.25)
    box-sizing: content-box
    border-radius: 5px
    font-size: 13px
    > a
      color: #fff
      display: block
      width: 100%
      height: 100%
      padding-left: 30px
      padding-right: 10px
      &::after
        content: ''
        +position(absolute, 11px 11px null null)
        +icon-sprite(4, 0, 15px, 15px)
        top: 50%
        margin-top: -5px
        @extend %icon-sprite
        right: 0
        left: 10px

    ul
      list-style: none
      margin: 0
      padding: 0

    ul li
      display: block

    ul li a
      display: block
      color: #fff
      padding-left: 10px
      padding-right: 10px
      width: 100%
      height: 100%
      background-color: rgba(255, 255, 255,0)
      +transition(background-color 500ms ease)
      &:hover
        background-color: rgba(255, 255, 255, .25)

    ul ul
      display: block
      background: $blue
      border-radius: 5px
      overflow: hidden
      max-height: 0px
      +transition(max-height 300ms ease-out)
      & li
        border-top: 2px solid rgba(255,255,255,.25)


    & > ul > li > a
      position: relative
      padding-left: 30px
      padding-right: 30px
      color: #fff
      +transition(left 300ms ease-out)

      &:hover
        background-color: transparent

      &::after
        content: ''
        +position(absolute, 11px 11px null null)
        +icon-sprite(4, 0, 15px, 15px)
        top: 50%
        margin-top: -5px
        @extend %icon-sprite
        right: 0
        left: 10px

      &::before
        content: ''
        +position(absolute, 10px 10px null null)
        +icon-sprite(1,1,10px,10px)
        top: 50%
        margin-top: -3px
        @extend %icon-sprite

    & ul > li:hover
      & > a
      //left: 8px
      & > a::before
      //display: none
      & ul
        max-height: 100px