@use "../../common" as *
@use "../../app" as *

.main__aside
  position: fixed
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
  top: 0
  left: 0
  width: var(--asidenav-width-lg, 20%)
  height: 100%
  flex: 0 0 0
  flex-basis: var(--asidenav-width-lg, 20%)
  transition: all .2s ease-out
  z-index: 20

  &::after
    content: ''
    position: absolute
    z-index: -2
    left: 0
    top: 0
    width: 100%
    height: 100%
    background-color: var(--color-grey-light)

@media (max-width: 425px)
  .main__aside
    position: fixed
    top: var(--header-height-collapsed)
    left: 0
    right: 0
    bottom: 0
    height: 100% !important
    width: 100%
    z-index: 5
    overflow: hidden
    transform: translateX(-110%)
    transition: transform .2s ease-out

    &.main__aside--expanded
      transform: translateX(0%)

      .asidenav__box-subtitle
        display: inherit

    .asidenav__box-title
      font-size: 18px
      padding-left: 10px

    .asidenav__box-subtitle
      display: none

@media (min-width: 1200px)
  .main__aside
    width: var(--asidenav-width-xl, 250px)

.asidenav
  color: var(--color-font)
  min-height: calc(100% - var(--header-height))
  height: 400px
  overflow-y: auto
  overflow-x: hidden

  &::-webkit-scrollbar
    width: 0

.asidenav__box
  transition: opacity .2s ease

  + .asidenav__box
    margin-top: 10px

.asidenav__box-title
  padding: 7px 13px
  margin-top: 30px
  background-color: transparent
  transition: all .2s ease
  padding: 10px 13px
  margin: 0
  border-bottom: 1px solid var(--color-grey)
  height: 44px

  .asidenav-term-identifier--long
    display: inherit

  .asidenav-term-identifier--short
    display: none

.asidenav__box-subtitle
  color: var(--color-fontsec)
  font-size: 0.9rem
  font-weight: 600
  padding: 0 13px
  margin: 3px 0

.asidenav__box-explanation
  @extend .explanation
  padding: 0 13px
  margin: 3px 0
  opacity: .66
  font-size: .7rem

  /* transition: opacity .2s ease, font-size .2s ease
  /* &:hover
  /*   font-size: .9rem
  /*   opacity: 1

// LOGO

.asidenav__logo
  height: var(--header-height)
  display: flex
  align-items: center

@media (max-width: 768px)
  .asidenav__logo
    display: none

.asidenav__logo-link
  flex: 1
  top: 10px
  left: 20px
  height: 80px
  padding: 0 20px
  display: flex
  flex-basis: var(--asidenav-width-xl, 250px)
  font-size: 16px
  align-items: center
  color: var(--color-dark)
  transform-origin: left

  &:hover
    color: var(--color-primary)

.asidenav__logo-lmu
  width: 80px
  height: 100%

.asidenav__logo-uni2work
  display: flex
  align-items: flex-end
  min-width: 70px
  margin-left: 12px
  text-transform: uppercase
  width: 100%
  height: 100%
  padding: 2px 4px
  border: 1px solid currentColor
  letter-spacing: 2px
  background-color: white
  transition: background-color .3s ease

@media (max-width: 1199px)
  .asidenav__logo-link
    flex-basis: var(--asidenav-width-lg, 20%)
    font-size: 16px

  .asidenav__logo-lmu
    display: none

  .asidenav__logo-uni2work
    margin-left: 0

// SEAL

.asidenav__sigillum
  position: absolute
  bottom: -40px
  right: 25px
  opacity: 0.1

  > img
    width: 350px

@media (max-width: 768px)
  .asidenav__sigillum
    right: auto
    left: 50%
    transform: translateX(-50%)

// LIST-ITEM

.asidenav__list-item
  color: var(--color-font)
  display: flex
  flex-direction: column
  justify-content: flex-start
  align-items: center

  &:not(.asidenav__list-item--active):hover
    background-color: var(--color-lightwhite)

    > .asidenav__link-wrapper
      color: var(--color-font)

  &:hover
    .asidenav__link-shorthand
      // transform: scale(1.05, 1.0);
      // transform-origin: right;
      text-shadow: none

    .asidenav__nested-list-wrapper
      display: block

// small list-item-padding for medium to large screens
@media (min-width: 769px)
  .asidenav__list-item
    padding-left: 10px

.asidenav__list-item--active
  background-color: var(--color-lightwhite)

  .asidenav__link-wrapper
    color: var(--color-link)

  .asidenav__link-shorthand
    transform: scale(1.05, 1)
    transform-origin: right
    text-shadow: none

.asidenav__link-wrapper
  position: relative
  display: flex
  flex: 1
  align-items: center
  padding: 8px 3px
  justify-content: flex-start
  color: var(--color-font)
  width: 100%
  z-index: 1

.asidenav__link-shorthand
  display: none

.asidenav__link-favourite-toggle
    opacity: .33

    &:hover
      opacity: 1

    button
      display: flex
      text-decoration: none

.asidenav__link-label
  display: flex
  justify-content: space-between
  align-items: center
  line-height: 1

  & > .asidenav__link-label-text
    word-break: break-word
    flex: 1 1 auto

  & > .asidenav__link-favourite-toggle
    flex: 0 0 $fa-fw-width
    margin: 0 5px

// hover sub-menus
.asidenav__nested-list-wrapper
  position: absolute
  z-index: 22
  display: none
  color: var(--color-font)
  background-color: var(--color-grey-light)
  box-shadow: 1px 1px 1px 0px var(--color-grey)

.asidenav__nested-list
  min-width: 200px

.asidenav__nested-list--unavailable
 font-size: 0.9rem
 color: var(--color-fontsec)
 font-weight: 600
 padding: 7px
 min-width: 200px

@media (max-width: 425px)
  .asidenav__list-item
    padding-left: 10px

  .asidenav__nested-list
    display: none
    
  .asidenav__nested-list--unavailable
    display: none

.asidenav__nested-list-item
  position: relative

  &:hover
    background-color: var(--color-lightwhite)

  .asidenav__link-wrapper
    padding-left: 13px
    padding-right: 13px
    transition: all .2s ease
    color: var(--color-font)

// TABLET
@media (min-width: 426px) and (max-width: 768px)
  .main__aside
    width: var(--asidenav-width-md, 50px)
    flex-basis: var(--asidenav-width-md, 50px)
    overflow: hidden
    min-height: calc(100% - var(--header-height-collapsed))
    top: var(--header-height-collapsed)

    .navbar__container-radio:checked ~ &
      min-height: calc(100% - var(--header-height-collapsed) - 30px)
      top: calc(var(--header-height-collapsed) + 30px)

    .asidenav__box-title
      width: var(--asidenav-width-md, 50px)
      font-size: 18px
      text-align: center
      padding: 10px 1px
      word-break: break-all
      background-color: var(--color-dark)
      color: var(--color-lightwhite)
      border: none

      &:hover
        background-color: var(--color-darker)

      &::before
        display: none

      .asidenav-term-identifier--long
        display: none

      .asidenav-term-identifier--short
        display: inherit

    .asidenav__box-subtitle
      padding: 0 3px
      font-size: 0.85rem

    .asidenav__link-shorthand
      display: flex
      position: static
      height: 50px
      width: var(--asidenav-width-md, 50px)
      text-align: center
      opacity: 1
      font-size: 15px
      line-height: 1em
      margin-right: 13px
      flex-shrink: 0
      padding: 1px
      outline: 1px solid white
      word-break: break-all
      align-items: center
      justify-content: center

    .asidenav__list-item
      padding-left: 0

      + .asidenav__list-item
        margin: 0

    .asidenav__link-wrapper
      color: var(--color-font)
      padding: 0

    .asidenav__nested-list, .asidenav__link-label, .asidenav__nested-list--unavailable
      display: none
      
    .asidenav__list-item--active
      .asidenav__link-wrapper
        background-color: var(--color-lightwhite)
