.header
  width: 100%
  height: 55px
  background: $header-background
  border-bottom: 1px solid $border
  display: flex
  align-items: center
  z-index: 200
  position: relative

  .container
    display: flex
    justify-content: space-between

    .header-left, .header-right
      display: inline-flex
      height: 50px
      align-items: center

    .header-left

      .header-item
        font-size: 13px
        margin-right: 20px
        font-family: $font-family-black
        color: $white

    .header-right

      .header-item
        margin-left: 30px
        font-weight: 700
        font-size: 13px
        font-family: $font-family-bold
        color: $white

        .nav-item-icon
          width: 20px
          height: 20px
          margin-right: 10px
          color: $dark

    .header-item
      display: inline-flex
      float: left
      height: 35px
      align-items: center
      cursor: pointer
      position: relative

      .abstruse-logo
        max-height: 25px
        width: auto
        margin-right: 10px

      .bell-icon
        width: 20px
        height: 20px

      .avatar-img
        width: 25px
        height: 25px
        border-radius: 0

      .header-user-span
        display: inline-flex
        align-items: center
        height: 25px

        i
          color: $white
          margin-left: 10px
          margin-top: 2px
          font-size: 14px

      .header-dropdown-menu
        position: absolute
        z-index: 10
        top: 45px
        right: -10px
        width: 200px
        display: block
        background: $white
        border: 1px solid $border
        border-radius: 4px
        box-shadow: 0 0 10px rgba($border, 0.6)
        cursor: default

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

        .header-dropdown-heading
          background: #fafafc
          height: 30px
          display: flex
          align-items: center
          padding: 0 10px
          border-bottom: 1px solid $border
          text-transform: uppercase
          font-size: 12px
          font-weight: 700
          justify-content: center

        .header-dropdown-link
          height: 34px
          background: $white
          font-weight: 600
          padding: 0 10px
          display: flex
          align-items: center
          color: $text-heading
          font-size: 12px
          justify-content: center

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

          i
            color: $black
            margin-right: 10px
            font-size: 14px

.sub-nav
  width: 100%
  height: 50px
  background: $white
  border-bottom: 1px solid $border

  .container
    display: flex
    justify-content: space-between

    .nav-left, .nav-right
      display: inline-flex
      height: 50px
      align-items: center

    .nav-left
      font-size: 18px

      h1
        font-size: 14px
        font-family: $font-family-medium
        color: $color-secondary
        text-transform: uppercase

    .nav-item
      display: inline-flex
      float: left
      height: 45px
      align-items: center
      cursor: pointer
      position: relative

    .nav-right

      .nav-tab
        height: 55px
        font-size: 12px
        font-weight: 600
        text-transform: uppercase
        color: $grey-dark
        display: inline-flex
        align-items: center
        border-bottom: 2px solid transparent
        cursor: pointer
        padding: 0 15px 0 5px
        margin-left: 10px

        &.is-active, &:hover
          color: $blue
          border-bottom: 2px solid $blue

          .svg-fill
            fill: $blue

        img, svg
          width: 20px
          height: 20px
          margin-right: 10px