@import './km-layout-vars'
  
km-layout
  position: relative
  display: block

  aside
    display: flex
    flex-direction: column
    align-content: stretch
    position: fixed
    z-index: 200
    top: 0
    left: 0
    bottom: 0
    height: auto
    width: $asideWidth
    background: #fff
    box-shadow: 1px 0 0 0 rgba($header-background-color, .6)
    transition: transform .3s ease-in-out
    a:link
      color: #404040E6
      text-decoration: none
      
    .km-layout-logo
      position: relative
      display: block
      width: 100%
      padding-bottom: 50%
      background-position: center
      background-repeat: no-repeat
      background-size: 75%
      transition: background-size .3s ease-in-out
      transition-delay: 0.1s
      animation: logo-start-animation .8s ease-in-out
      &.empty
        padding-bottom: 0
        height: $headerHeight
      &:after
        content: ''
        position: absolute
        z-index: -1
        width: 100%
        height: 100%
        box-shadow: inset 0 -12px 20px 10px rgba(239 0 0 / 4%)
        background: linear-gradient(to bottom, rgb(0 0 255 / 4%) 30%, rgb(239 0 0 / 4%) 60%)

    nav
      height: 100%
      overflow-y: auto
      overflow-x: hidden
      box-shadow: 0 -1px 0 0 rgba(239 0 0 / 30%)
      background: $aside-third-level-color
      /* Hide scrollbar for Chrome, Safari and Opera */
      &::-webkit-scrollbar
        display: none
      /* Hide scrollbar for IE, Edge and Firefox */
      &.example
        -ms-overflow-style: none
        scrollbar-width: none
      ul
        list-style: none
        margin: 0
        padding: 0
        width: 100%
        background: #fff
        li
          margin: 0
          width: 100%
          cursor: pointer
          > ul
            overflow: hidden
            interpolate-size: allow-keywords
            transition: height .4s ease-in-out, visibility .4s ease-in-out
          > .wrapper
            position: relative
            z-index: 401
            display: flex
            align-items: center
            width: 100%
            transition: transform .6s ease-in-out, color .4s ease-in-out, box-shadow .4s ease-in-out, background .6s ease-in-out
            > a,
            > span
              display: flex
              align-items: center
              height: 100%
              flex-grow: 1
              > .label
                position: relative

        li.static
          .wrapper 
            > * > i.after-icon
              margin-left: auto
              padding: 0
              font-size: 1.2rem
              color: $secondary-color
          &:hover .wrapper > i
            color: darken($primary-color, 5%)
        li.expandable
          .wrapper 
            > i
              display: flex
              align-items: center
              margin-left: auto
              padding: 0 1.5rem
              height: $aside-first-level-list-item-height
              font-size: 1.2rem
              transition: transform .5s ease-in-out
        li.expanded
          > ul
            height: auto
            visibility: visible
        li.collapsed
          > ul
            height: 0
            visibility: collapse
        li:not(.expandable)
          > .wrapper
            > a,
            > span
              > .explanation
                display: flex
                align-items: center
                margin-left: auto
                border-radius: 3px
                font-size: 1.3rem
                height: 2rem
                padding: .5rem
                color: $secondary-color
                text-transform: none
                font-weight: 400
                font-family: 'Roboto condensed', sans-serif
                background: rgba($text-color, .08)
              > b
                display: flex
                align-items: center
                margin-left: auto
                font-size: 1.2rem
                text-align: center
                position: relative
                line-height: 1
                height: 2.2rem
                padding: 0 .6rem
                border-radius: 3px
                font-weight: 600
                font-family: 'Roboto mono', sans-serif
                color: $secondary-color
                background: rgba(#fff, .9)
                box-shadow: 0 0 0 1px rgba(#000, .04)
                > i
                  margin: 0 0 0 .6rem
                  font-size: 1.4rem
                  color: $primary-color
                &:not(.custom):after
                  content: "\f06a"
                  display: inline-block
                  font-size: 1.4rem
                  font-style: normal
                  font-weight: 400
                  font-variant: normal
                  text-rendering: auto
                  margin: 0 0 0 .5rem
                  -webkit-font-smoothing: antialiased
                  font-family: "Font Awesome 5 Pro"
                  color: $primary-color
                  vertical-align: top
                  animation: badge-pulse 1s ease-in-out infinite alternate

      ul.first-level
        box-shadow: 0 4px 4px 0 rgba(#000, .2)
        > li          
          > .wrapper
            font-weight: 700
            font-size: 1.3rem
            text-transform: uppercase
            background: transparent
            height: $aside-first-level-list-item-height
            box-shadow: inset 0 -1px 0 0 rgba($header-background-color, .6)              
            &:hover > * > .label:before
              width: 100%
            > a,
            > span
              padding: 0 1.5rem
              color: darken($secondary-color, 5%)
              > .label:before
                display: block
                content: ''
                position: absolute
                bottom: 0
                left: 0
                width: 0
                height: 1px 
                background: rgba($secondary-color, .6)
                transition: width .5s ease
              > i.before-icon
                padding: 0 .7rem 0 0
                margin-bottom: .2rem
                font-size: 1.6rem
                color: lighten($secondary-color, 10%)
                &.animated
                  animation: first-level-before-icon 10s ease-in-out infinite
                &.primary
                  color: darken($primary-color, 5%)
              > i.svg-icon
                margin: 0 .7rem 0 0
                width: 2rem
                height: -moz-available
                height: -webkit-fill-available
                height: stretch
                background-position: 0 45%
                background-repeat: no-repeat
        > li.expanded > ul.second-level > li:first-of-type > .wrapper
          box-shadow: inset 0 -1px 0 0 rgba(#000, .2), inset 1px 4px 4px 0 rgba($header-background-color, .2)
        > li:first-of-type > .wrapper
          box-shadow: inset 0 -1px 0 0 rgba(#000, .5)
        > li.expanded > .wrapper > i
          transform: scale(1) rotate(180deg)
        > li.collapsed > .wrapper > i
          transform: scale(1) rotate(0deg)

      ul.second-level
        background: $aside-third-level-color
        > li
          > .wrapper
            font-weight: 400
            font-size: 1.4rem
            font-family: 'Roboto slab', serif
            height: $aside-second-level-list-item-height
            box-shadow: inset 0 -1px 0 0 rgba(#000, .2)
            > a,
            > span
              padding: 0 1.5rem 0 1.5rem
              color: $text-color
              > i.after-icon
                font-size: 1.2rem
                margin-left: auto
                color: $secondary-color
          &:not(.expandable) > .wrapper
            font-family: 'Roboto condensed', sans-serif
            &:hover
              background: rgba($secondary-color, .06)
          > ul.third-level
            > li:first-of-type
              > .wrapper
                box-shadow: inset 0 -1px 0 0 rgba(#000, .2), inset 0 1px 5px -2px rgba(#000, .2)
        li.expanded > .wrapper > i
          transform: rotate(180deg)
        li.collapsed > .wrapper > i
          transform: rotate(0deg)
        > li.expandable
          background: #fff
          .wrapper > i
            color: rgba($text-color, .6)
        > li.highlighted
          > .wrapper
            > a,
            > span
              font-size: 1.5rem
              color: darken($primary-color, 3%)

      ul.third-level
        background: $aside-third-level-color
        > li
          > .wrapper
            font-weight: 400
            font-size: 1.4rem
            font-family: 'Roboto condensed', sans-serif
            height: $aside-third-level-list-item-height
            box-shadow: inset 0 -1px 0 0 rgba(#000, .2)
            > a,
            > span
              color: rgba(#000, .7)
              padding: 0 1.5rem 0 2rem
              > i.after-icon
                font-size: 1.3rem
                margin-left: auto
                color: $secondary-color
              > .label
                &:before
                  display: inline-block
                  margin: 0 .7rem 0 0
                  content: ''
                  width: 3px
                  height: 3px
                  border-radius: 50%
                  background: rgba(#000, .5)
                  vertical-align: middle
                  transition: color .6s ease
        > li.highlighted
          > .wrapper 
            > a,
            > span
              font-weight: 600
              color: $secondary-color
              letter-spacing: .01rem
              > span
                &:before
                  width: 3.5px
                  height: 3.5px
                  background: darken($primary-color, 3%)


      ul.second-level, ul.third-level
        > li
          > .wrapper
            > * > .label:after
              display: block
              content: ''
              position: absolute
              bottom: 1px
              left: 0
              width: 0
              height: 1px 
              background: rgba(#000, .5)
              transition: width .6s ease
            &:hover
              > * > .label:after
                width: 100%
      ul.second-level > li.highlighted > .wrapper > * > .label:after
        background: rgba($primary-color, .5)
      ul.third-level > li
        > .wrapper
          > * > .label:after
            left: 1rem
          &:hover > * > .label:after
            width: calc(100% - 1rem)
        &:not(.expandable) > .wrapper:hover
          background: rgba($secondary-color, .07)
        &:not(.highlighted) > .wrapper:hover > * > .label:before
          background: #000
    div[slot="afterNav"]
      background: $aside-third-level-color
  @keyframes first-level-before-icon
    0%
      opacity: 0
      transform: translateX(-200%)
    3%
      opacity: 1
      transform: translateX(0%)
    96%
      opacity: 1
    100%
      opacity: 0

  @keyframes logo-start-animation
    0%
      opacity: 0
      background-size: 300%
    30%
      opacity: 0
      background-size: 300%
    100%
      opacity: 1
      background-size: 75%