.navbar-container
  position: relative

.navbar-shadow
  position: fixed
  right: 0
  top: 0
  height: var(--header-height-collapsed)
  width: 20px
  z-index: 50
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent)
  transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)

@media (min-width: 768px)
  .navbar-shadow
    height: var(--header-height)

@media (min-width: 1025px)
  .navbar-shadow
    display: none

.navbar
  position: fixed
  display: flex
  flex-direction: row
  align-items: center
  justify-content: flex-start
  right: 0
  top: 0
  left: var(--asidenav-width-xl)
  height: var(--header-height)
  background-color: var(--color-primary)
  color: white
  z-index: 20
  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)

@media (max-width: 1199px)
  .navbar
    left: var(--asidenav-width-lg)

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

// 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

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

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

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

@media (max-width: 768px)
  .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 list
.navbar__list
  white-space: nowrap

  + .navbar__list
    margin-left: 12px

@media (min-width: 769px)
  .navbar__list:last-of-type
    padding-right: 40px

@media (max-width: 768px)
  .navbar__list
    + .navbar__list
      margin-left: 0
      padding-right: 40px

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

  &:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper
    margin-left: 12px

  &:not(.navbar__list-item--favorite) + .navbar__list-item
    margin-left: 12px

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

    &:not(.navbar__list-item--favorite) + .navbar__list-item
      margin-left: 0

    &:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper
      margin-left: 0

.navbar__list-left
  flex: 5
  padding-left: 40px

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

// "Favorites" list item, only visible on small screens and logged in
.navbar__list-item
  &.navbar__list-item--favorite
    display: none

.navbar__list-item--favorite
  display: none
  background-color: var(--color-primary)

.logged-in
  .navbar__list
    li.navbar__list-item--favorite,
    .navbar__list-item--favorite
      display: inline-block

@media (min-width: 426px)
  .logged-in
    .navbar__list
      .navbar__list-item--favorite
        display: none !important

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

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

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

.navbar .navbar__list-item:not(.navbar__list-item--active):not(.navbar__list-item--favorite):hover .navbar__link-wrapper, #lang-checkbox:checked ~ * .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)

@media (max-width: 768px)
  .navbar,
  .navbar__pushdown
    height: var(--header-height-collapsed)

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

@media (max-height: 500px)
  .navbar,
  .navbar__pushdown
    height: var(--header-height-collapsed)

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

#lang-dropdown
  display: none
  position: fixed
  top: var(--header-height)
  right: 0
  min-width: 200px
  z-index: 10
  background-color: white
  border-radius: 2px
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)

  select
    display: block

  button
    display: block
    width: 100%

#lang-checkbox:checked ~ #lang-dropdown
  display: block

@media (max-width: 768px)
  #lang-dropdown
    top: var(--header-height-collapsed)
