Header {
  -webkit-app-region: drag

  $colorPrimary

  width: 100%
  height: 3.5rem
  position: fixed
  top: 0
  z-index: 99

  display: grid
  grid-template-rows: auto
  grid-template-columns: auto
  justify-content: center

  div.window-controls {
    -webkit-app-region: no-drag

    position: fixed
    right: 0
    z-index: 100

    display: flex

    img {
      padding: .5rem
      cursor: pointer
      :hover {
        filter: drop-shadow(rgba(255, 255, 255, .5) 0 0 2px)
      }
    }
  }

  nav {
    -webkit-app-region: drag

    width: 20rem

    display: flex
    align-items: center
    justify-content: space-between

    i {
      -webkit-app-region: no-drag

      cursor: pointer
      text-decoration: none
      font-size: 1.4rem 

      display: flex
    }

    i { font-size: 1.4rem }
    i.notifications { color: #7da9ea }
    i.fa-bell.notifications { color: #fff }
    i.fa-bell-o { color: #7da9ea }
    i.-disabled { 
      filter: opacity(.4)
      cursor: not-allowed
    }

    (a) {
      color: #222
      margin-right: 1rem

      :hover {
        text-decoration: underline
      }
    }
}