$header-height: 60px

.header
  width: 100%
  height: $header-height
  background: $background-header
  display: flex
  align-items: center
  position: relative
  font-family: $font-family-roboto
  border-bottom: 1px solid $border-default

  .header-container
    width: 100%
    height: 100%
    display: flex
    justify-content: space-between

    .header-left, .header-right
      height: 100%
      display: flex
      align-items: center

    .header-item
      +unselectable
      display: inline-flex
      align-items: center
      height: $header-height
      color: $text-primary
      cursor: pointer
      position: relative
      text-transform: uppercase
      font-size: 13px
      padding: 0 15px
      font-weight: $weight-medium
      outline: none
      text-decoration: none

      &:first-child
        padding-left: 0

      &:last-child
        padding-right: 0

      &:hover, &.is-active
        color: $green
        text-decoration: none

        .icon-down
          color: $text-primary

      &.logo
        margin-right: 15px

        img, svg
          height: 30px

      .user-item
        display: flex
        align-items: center

        .avatar-container
          display: inline-flex
          align-items: center
          justify-content: center
          width: 40px
          height: 40px
          border-radius: 50%
          border: 1px solid $border-default
          vertical-align: middle
          margin-right: 5px
          position: relative

          .avatar
            display: block
            max-height: 35px
            border-radius: 50%
            padding: 3px

          .connection-indicator
            position: absolute
            width: 12px
            height: 12px
            display: block
            border-radius: 50%
            bottom: -2px
            left: -2px

            &.is-green
              background: $green

            &.is-red
              background: $red

            &.is-yellow
              background: $yellow

        .user-info
          display: flex
          flex-direction: column
          padding: 0 15px

          .name, .role
            display: block
            width: 100%
            text-transform: none

          .name
            font-size: 12px
            color: $text-primary

          .role
            font-size: 11px
            color: $text-secondary
            text-transform: capitalize
            font-weight: $weight-normal

        .icon-down
          font-size: 10px

  .header-dropdown-container
    width: 190px
    background: $background-floating
    position: absolute
    top: 55px
    right: -29px
    border-radius: $border-radius-floating
    box-shadow: $box-shadow
    text-transform: none
    border: 1px solid $border-default
    z-index: 20

    &::after
      position: absolute
      content: ''
      display: block
      width: 16px
      height: 16px
      transform: rotate(-45deg)
      top: -8px
      right: 23px
      background: $background-floating
      border-right: 1px solid $border-default
      border-top: 1px solid $border-default

    .hd-links
      padding: 10px 5px

      &.gray-bg
        background: $background-light
        border-top: 1px solid $border-default

    .hd-item
      width: 100%
      height: 35px
      display: flex
      align-items: center
      color: $text-menu
      padding: 5px 20px
      font-size: 14px
      font-weight: $weight-normal
      outline: none
      text-decoration: none
      text-transform: none

      &:hover
        color: $green

      .connection-indicator
        width: 12px
        height: 12px
        display: block
        border-radius: 50%
        margin-right: 10px

        &.is-green
          background: $green

        &.is-red
          background: $red

        &.is-yellow
          background: $yellow
