.navbar {
  height: 48px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--gray-25);
  transition: all 0.3s ease;
}

.navbar.fixed {
  box-shadow: 0 var(--spacing-1) var(--spacing-2) rgba(0, 0, 0, 0.1);
}

.navbar .sidebar-menu-left, .navbar #logo_white_middle, .navbar #logo_purple_middle, .navbar .sidebar-menu-right{
  display: none;
}

.navbar .right-section {
  right: 20px;
  top: var(--spacing-7);
}

.navbar .notification-count {
  top: -1px;
  left: 11px;
  min-width: var(--spacing-6);
  height: var(--spacing-6);
  color: var(--warning-900);
  border: var(--border-width-thin) var(--border-style-solid) var(--orange-700);
}

.navbar .user-btn:hover {
  background-color: var(--purple-100);
}

.navbar .right-section .logged-out-btn{
  width: 120px;
  text-decoration: none;
}

.navbar .popover-menu{
  right: 0;
  width: 280px;
}

@media screen and (max-width: 768px) {
  .navbar {
    margin-left: var(--spacing-0);
    flex-direction: var(--flex-direction-col);
    padding: var(--spacing-2) var(--spacing-4);
    gap: var(--spacing-2);
    background: var(--gray-25);
  }

  .navbar .close-btn {
    display: none;
  }

  .navbar #logo_white_middle, .user-profile .user-span, .navbar .logged-out-text, .navbar .logged-out-btn{
    display: none;
  }

  .navbar #logo_purple_middle, .navbar .sidebar-menu-right, .navbar .logged-out-logo {
    display: flex;
  }

  .navbar .sidebar-menu-left{
    display: flex;
    align-items: var(--items-center);
  }

  .navbar .sidebar-menu-left navbar-icon{
    font-size: var(--font-size-2xl);
    color: var(--purple-700);
  }

  .navbar .right-section {
    top: var(--spacing-4);
    right: var(--spacing-6);
    gap: var(--spacing-5);
  }

  .navbar .right-section navbar-icon{
    color: var(--purple-700);
  }

  .navbar .notification-count {
    top: 1px;
    left: 11px;
    min-width: 14px;
    height: 14px;
  }

  .navbar.dark-mode {
    background: var(--primary-950);
  }

  .navbar.dark-mode.fixed {
    box-shadow: 0 var(--spacing-1) var(--spacing-2) rgba(0, 0, 0, 0.2);
  }

  .navbar.dark-mode i:not(.drawer__close_button i) {
    color: var(--gray-25);
  }

  .navbar.dark-mode  #logo_white_middle {
    display: flex;
  }

  .navbar.dark-mode  #logo_purple_middle, .navbar #logo_purple_right{
    display: none;
  }

  .navbar{
    width: 100vw;
  }
}