@import './km-layout-vars'
  
$headerHeight: 60px
km-layout
  header
    .km-layout-toolbar
      display: flex
      flex-direction: row
      align-items: center
      > button, > .button
        position: relative
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        appearance: none
        -moz-appearance: none
        -webkit-appearance: none
        outline: none
        cursor: pointer
        margin: 0
        border: 0
        padding: 0
        width: $headerHeight
        height: $headerHeight
        font-size: 13px
        font-weight: 700
        line-height: 1
        color: #fff
        text-decoration: none
        background: rgba(#000, .3)
        box-shadow: inset 1px 0 0 0 rgba(#fff, .2)
        transition: all 0.3s ease-in-out
        i
          display: block
          font-size: 2.5rem
        span
          display: block
          font-size: 1rem
          letter-spacing: .05rem
          font-weight: 300
          text-transform: uppercase
          opacity: 0
          font-family: 'Roboto condensed', sans-serif
        i+span
          height: 0
          overflow: hidden
          opacity: 0
          transition: all 0.3s ease-in-out
        &:hover i+span
          margin-top: 5px
          height: 10px
          opacity: .8
        b
          display: flex
          align-items: center
          justify-content: center
          position: absolute
          padding: 0 .5rem
          top: 4px
          right: 4px
          border-radius: 50%
          min-width: 24px
          height: 24px
          font-size: 1.2rem
          font-weight: 500
          color: darken($error-color, 5%)
          text-align: center
          background: #fff
          font-family: 'Roboto condensed', sans-serif
          animation: badge-pulse 1s ease-in-out infinite alternate
      > .button b
        letter-spacing: -.3px
      .notifications-error a[href="notifiche"] > b
        font-size: 1.4rem
        color: $secondary-color
      > ul[data-subtool]
        position: absolute
        top: $headerHeight
        margin: 0
        padding: 0
        list-style: none
        max-height: 0
        overflow: hidden
        background: $header-background-color
        transition: max-height .6s ease-in-out
        &.visible
          max-height: calc(#{$toolbar-dropdown-list-item-min-height} * #{$current-dropdown-list-item-number})
        li
          margin: 0
          padding: 0
          a
            display: flex
            align-items: center
            padding: 0 2rem
            font-size: 1.4rem
            color: #fff
            height: $toolbar-dropdown-list-item-min-height
            text-decoration: none
            background-color: rgba(#000,0.15)
            box-shadow: inset 0 2px 0 -1px rgba(#fff,0.3)
            transition: all 0.3s ease-in-out     
            > i
              margin-right: 1rem
              font-size: 2rem
              width: 2.5rem
              color: rgba(#fff, .8)
            > i.svg-icon
              margin-right: 1.1rem
              width: 2.3rem
              height: -moz-available
              height: -webkit-fill-available
              height: stretch
              background-position: center
              background-repeat: no-repeat
            > .label
              position: relative
              &:before
                display: block
                content: ''
                position: absolute
                bottom: -1px
                left: 0
                width: 0
                height: 1px 
                background: #fff
                transition: width .3s ease
            &:hover
              background-color: rgba(#000, .3)   
              > .label:before
                width: 100%
          &:first-of-type > a
            box-shadow: none