// Desktop
@media screen and (min-width: $min-desktop)
  .navbar.side-nav
    right: inherit
    height: 100vh
    width: $side-nav-width
    padding: 20px 10px

  .side-nav
    &.navbar, .navbar-brand, .navbar-menu, .navbar-start
      flex-direction: column
      overflow-y: auto

    .navbar-brand .navbar-item
      padding: 0 3px 15px 3px
      img
        max-height: 150px

  .navbar.top-nav
    margin-left: $side-nav-width
    border-bottom: $beige 1px solid
  
  .desktop-hidden
    display: none

// Mobile
@media screen and (max-width: $max-tablet)
  .navbar.side-nav
    .navbar-brand .navbar-item
      padding-top: 3px
      padding-bottom: 3px
      img
        max-height: 46px
    .navbar-menu.is-active
      padding: 10px 10px
  
  .navbar.top-nav
    display: none

// Global
a.navbar-item:hover
  color: $bright-black
  background-color: $beige
  border-radius: $border-radius