nav.sass

.nav
  height: 75px
  width: 100%
  z-index: 90 !important
  background-color: $white
  position: relative

  .nav-logo
    margin-left: -10px

    img
      height: 20px

  .nav-item:not(.nav-logo)
    color: $color !important
    font-size: 13px
    margin-right: 15px
    font-weight: 700
    font-family: $font-family-semibold

    .icon
      display: block
      float: left
      width: 25px
      height: 25px
      margin-right: 5px

    i
      font-size: 20px !important
      margin-right: 10px
      color: $color

    &.notification-item
      cursor: pointer

      img
        width: 30px
        min-height: 30px

      .notify-num-container
        position: absolute
        width: 20px
        height: 20px
        display: flex
        justify-content: center
        align-items: center
        background: $blue
        color: $white
        border-radius: 50%
        top: 9px
        right: 82px

      .notification-dropdown
        position: absolute
        width: 400px
        top: 75px
        right: 62px
        border-radius: 5px
        padding-top: 12px
        padding-bottom: 12px
        background: $white
        box-shadow: 1px 2px 3px rgba(10, 10, 10, 0.1)
        border: 1px solid $border
        z-index: 100

        &:after
          content: ''
          position: absolute
          top: -7.5px
          right: 35px
          background: $white
          width: 15px
          height: 15px
          transform: rotate(-45deg)
          border-top: 1px solid $border
          border-right: 1px solid $border

        .notification-item
          display: block
          color: $color-secondary
          padding: 10px
          font-size: 13px
          position: relative
          text-align: left
          font-weight: normal

          .error
            color: $red

          .warning
            color: $yellow

          &:last-child
            border-bottom-left-radius: 4px
            border-bottom-right-radius: 4px

          &:hover
            background: $background

    &.user-item
      margin-top: 17px
      height: 40px
      min-height: 40px
      display: inline-flex
      align-items: center
      justify-content: flex-start
      border-bottom: none !important

      &.is-open
        background: transparent

      span
        font-size: 14px
        color: $blue-secondary
        font-weight: 600

      i
        position: absolute
        top: 26px
        right: -10px
        font-size: 14px !important

    img.nav-item-icon
      width: 20px
      height: 20px
      margin-right: 10px

    .nav-avatar
      display: block
      float: left
      width: 35px
      min-height: 35px
      border-radius: 5px
      margin-right: 10px
      background: $grey-light

    .ion-chevron-down
      display: block
      float: left
      margin-left: 10px
      color: $color

  .nav-dropdown
    position: absolute
    z-index: 100
    width: 200px
    top: 65px
    right: -8px
    padding-top: 12px
    background: $white
    border: 1px solid $border
    border-radius: 4px

    &:after
      display: block
      content: ''
      transform: rotate(-45deg)
      width: 12px
      height: 12px
      background: $white
      border-top: 1px solid $border
      border-right: 1px solid $border
      position: absolute
      top: -6px
      right: 10px

    .nav-dropdown-item
      display: block
      color: $color
      padding: 10px
      font-size: 12px
      position: relative
      text-align: center
      font-weight: 700
      font-family: $font-family-semibold

      &:last-child
        border-bottom-left-radius: 4px
        border-bottom-right-radius: 4px

      &:hover
        background: $white
        color: $color

    .version-link
      font-size: 10px
      color: $color
      padding: 5px 10px
      position: relative
      display: block
      text-align: center
      font-family: $font-family-semibold

      i
        position: absolute
        font-size: 14px !important
        top: 0
        right: 0
        color: $color !important

      &:hover
        color: $color

  &.sub-nav
    background: $white
    padding-top: 30px
    padding-bottom: 30px
    display: flex
    align-items: center
    z-index: 80 !important
    box-shadow: 1px 2px 5px rgba($black, 0.1)
    border-bottom: none
    height: 50px

    +mobile
      display: none

    .nav-left

      .nav-item

        h1
          color: $color
          font-size: 18px
          font-weight: $weight-normal
          margin-left: -10px

          +mobile
            display: none

        span
          margin-left: 20px
          color: $color-secondary

    .nav-center
      display: flex
      align-items: center

    .nav-right
      display: flex
      align-items: center
      justify-content: flex-end

      +mobile
        justify-content: center

      .nav-item
        max-width: 50px

        img
          max-width: 20px
          margin-right: 0

        &:hover
          color: $white

    .status-badge
      display: block
      float: left
      margin-top: 10px
      margin-left: 5px