// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design

@use '../../icons.scss'

.navbar-container
  position: relative

.navbar
  position: fixed
  right: 0
  top: 0
  left: 0
  min-height: var(--header-height)
  background-color: var(--color-primary)
  color: white
  z-index: 22
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2)
  overflow: auto
  transition: all 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
  margin: 0
  padding: 10px 0

  @media (max-width: 768px), (max-height: 500px)
    min-height: var(--header-height-collapsed)
    padding: 0

  @media (max-width: 768px)
    left: 0

  display: flex
  & > *
    flex-grow: 1

.navbar__stack
  display: flex
  flex-flow: column nowrap

  & > *
    flex-grow: 1

// LIST WRAPPER

.navbar__list-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-between
  align-items: center
  margin: 0

  @media (min-width: 769px)
    margin: 0 40px

.navbar__list
  display: flex
  flex-flow: row nowrap
  justify-content: flex-end
  align-items: center
  list-style-type: none
  margin: 0

  &.navbar__list-left
    justify-content: flex-start
    margin-right: 40px

  & > *
    display: block

.navbar__container-list
  /* margin: 10px 0 0 0 */
  position: relative
  padding: 0 40px
  overflow: hidden
  display: flex
  flex-grow: 1
  
  & > ul
    display: flex
    flex-grow: 1
    flex-flow: row nowrap
    align-items: center
    overflow: overlay
    list-style-type: none
    justify-content: flex-end
    margin: 0

    & > *
      display: block

      @media (min-width: 501px)
        margin-right: 12px

      &:last-child
        margin-right: 0

  &.navbar__container-list--left > ul
    justify-content: flex-start

  @media (max-width: 768px)
    padding: 0

  margin: 0
  height: 0
  transition: all 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)

  .navbar__container-list-closer
    position: absolute
    top: 5px
    right: 10px
    width: 20px
    height: 20px
    text-align: center

    transform-origin: 10px 10px
    transform: rotate(-0.25turn)

    opacity: 0.5
    transition: transform 0.2s, opacity 0.2s ease

    &:hover
      opacity: 1

      transform: scale(1.4)

    &.navbar__container-list-closer--hidden
      visibility: hidden
      
    @media (max-width: 768px)
      visibility: hidden

  &.navbar__container-list--left .navbar__container-list-closer
    transform: rotate(0.25turn)
    right: auto
    left: 10px

    &:hover
      transform: scale(1.4)

// LOGO

.navbar__logo
  margin-right: 40px

  @media (max-width: 1199px)
    display: none

.navbar__logo-lmu
  height: 100%
  width: 160px

// links
.navbar__link-wrapper
  display: flex
  flex-direction: column
  justify-content: flex-end
  align-items: center
  height: 80px
  min-width: 90px
  color: var(--color-lightwhite)
  transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
  overflow: hidden
  cursor: pointer

  @media (max-width: 768px), (max-height: 500px)
    height: var(--header-height-collapsed)


.navbar__link-icon
  opacity: 0.7
  transition: opacity 0.2s ease
  margin-bottom: 7px

  span
    @extend .white-ico

.navbar__link-label
  transition: opacity .2s ease
  padding: 2px 4px
  text-transform: uppercase
  font-weight: 600
  font-size: 16px

@media (min-width: 769px) and (min-height: 501px)
  .navbar__link-wrapper
    border: 1px solid rgba(255, 255, 255, 0.7)

@media (max-width: 768px), (max-height: 500px)
  .navbar__link-wrapper
    box-shadow: none
    min-width: 0
    align-items: center
    justify-content: center

  .navbar__link-label
    padding: 0 7px

  .navbar__link-icon
    transform: scale(0.65)
    margin-bottom: 0

.navbar__container-link
  display: block
  
  @media (min-width: 769px) and (min-height: 501px)
    border: 1px solid rgba(255, 255, 255, 0.7)

  height: 30px
  color: var(--color-lightwhite) !important
  background-color: rgba(0, 0, 0, 0) !important
  padding: 5px 10px
  text-transform: uppercase
  font-weight: 600
  font-size: 16px
  outline: 0
  min-width: 0
  transition: none
  cursor: pointer
  white-space: nowrap

  &:not(.navbar__container-link--active):hover
    background-color: var(--color-dark) !important
    color: var(--color-lightwhite) !important

  &.navbar__container-link--active
    background-color: var(--color-lightwhite) !important
    color: var(--color-dark) !important


// list item
.navbar__list-item
  position: relative
  transition: background-color .1s ease

  & + .navbar__list-item
    margin-left: 12px

@media (max-width: 500px)
  .navbar__list-item
    min-width: 60px

    & + .navbar__list-item
      margin-left: 0

// "Favorites" list item, only visible on small screens and logged in
@media (min-width: 426px)
  .navbar__list-item--favorite
    display: none !important

    & + .navbar__list-item
      margin-left: 0

.navbar__list-item--active
  background-color: var(--color-lightwhite)
  color: var(--color-dark)

  .navbar__link-wrapper
    color: var(--color-dark)

    .navbar__link-icon
      .white-ico
        filter: var(--filter-primary)


.navbar__list-item--active .navbar__link-wrapper
  color: var(--color-dark)

.navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper
  background-color: var(--color-dark)
  color: var(--color-lightwhite)

  .navbar__link-icon
    opacity: 1


// sticky state
.navbar--sticky
  height: var(--header-height-collapsed)
  z-index: 100

  .navbar__link-wrapper
    height: var(--header-height-collapsed)

.navbar__pushdown
  height: var(--header-height)
  transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)

.navbar--sticky + .navbar__pushdown
  display: block
  height: var(--header-height-collapsed)

.navbar__container-radio--none, .navbar__container-radio
  display: none