@import './km-layout-vars'
  
km-layout
  header
    position: fixed
    top: 0
    right: 0
    left: 0
    z-index: 1
    padding-left: 1rem
    height: $headerHeight
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    color: #fff
    background: $header-background-color
    *
      color: inherit
    h1
      font-size: 3rem
      font-weight: 100
      font-family: 'Roboto flex', sans-serif

    .km-layout-info-box
      display: flex
      align-items: center
      justify-content: center
      margin-left: auto
      > .wrapper
        display: flex
        align-items: center
        justify-content: center
        border-radius: 2px
        padding: .5rem 1.2rem
        font-size: 1.1rem
        font-weight: 800
        line-height: 1.1
        color: $secondary-color
        text-transform: uppercase
        background: #fff
        > div
          margin-left: 1.2rem
          padding-left: 1.6rem
          white-space: nowrap
          box-shadow: inset 1px 0 0 rgba($secondary-color, .5)
          font-size: 1.2rem
          font-weight: 500
          font-family: 'Roboto condensed', sans-serif
          > strong
            font-weight: 700
            color: $error-color
        > i
          font-size: 2.8rem
          color: $error-color 

    .km-layout-user
      position: relative
      display: flex
      flex-direction: row
      align-items: center
      flex-shrink: 0
      margin-left: auto
      overflow: hidden
      > span
        border-radius: 50%
        width: 4.2rem
        height: 4.2rem
        overflow: hidden
        margin-left: 1rem
        background: rgba(#000, .1)
        box-shadow: inset 0 0 0 1px rgba(#fff, 1)
      > span.profile-icon
        display: flex
        align-items: center
        justify-content: center
        > i
          font-size: 2.1rem
      > span.profile-picture
        background-position: 50% 50%
        background-size: cover
        background-repeat: no-repeat
      > div.user-profile
        display: flex
        align-items: center
        justify-content: center
        flex-direction: column
        padding: 0 1rem
        font-size: 1.3rem
        line-height: 1.5rem
        height: $headerHeight
        cursor: pointer
        > strong.user-name-title
          align-self: flex-start
          margin-bottom: .4rem
          font-size: 1.4rem
          font-weight: 600
          text-transform: uppercase
          letter-spacing: .05rem
          font-family: 'Roboto flex', sans-serif
          color: #fff
        > span
          display: block
          &.displayName
            font-weight: 70
          &.user-name
            font-weight: 200
            font-size: 1.5rem
            color: rgba(#fff, .8)
            align-self: flex-start
            font-family: 'Roboto condensed', sans-serif
          &.impersonation
            border-radius: 2px
            padding: 0.5rem
            font-size: 11px
            font-weight: 700
            line-height: 1
            color: red
            text-transform: uppercase
            background-color: #ffffff
            box-shadow: 0 0 10px #00000066

      > a
        display: flex
        position: absolute
        flex-direction: row
        align-items: center
        justify-content: center
        top: calc($headerHeight * 1)
        right: 0
        width: 100%
        height: 100%
        font-size: 1.5rem
        text-decoration: none
        color: #fff
        opacity: .5
        font-weight: 200
        font-family: 'Roboto flex', sans-serif
        text-decoration: underline
        text-underline-offset: .4rem
        text-decoration-color: rgba(#fff, .4)
        background: #181f2b
        transition: top .5s ease, opacity .5s ease
        box-shadow: inset 1px 0 0 0 rgba(#fff, .2)
      &:hover > a
        top: 0
        opacity: 1

  aside+header
    left: $asideWidth
    transition: all .3s ease-in-out
    transition-delay: .1s
  &+router-view
    position: fixed
    top: $headerHeight
    right: 0
    bottom: 0
    left: $asideWidth
    transition: left .3s ease-in-out
    transition-delay: .2s
  
  &.collapsed aside
    transform: translateX(-100%)
    .km-layout-logo
      background-size: 200%
      transition-delay: .3s
  &.collapsed aside+header
    padding-left: $headerHeight
    left: 0
    transition-delay: 0s
  &.collapsed+router-view
    left: 0
    transition-delay: 0s

@media screen and (max-width: 860px)
  km-layout
    aside+header
      padding-left: $headerHeight
      left: 0
    &+router-view
      left: 0
@media screen and (max-width: 620px)
  km-layout
    header
      h1
        font-size: 1rem
        font-weight: 700
        text-transform: uppercase
      .km-layout-user
        display: none