// 
// topbar.scss
// 

.app-topbar {
     top: 0;
     z-index: 1005;
     position: sticky;
     transition: all 0.3s ease-in-out;
     height: $topbar-height;
     background-color: $topbar-bg;
     padding-left: $sidebar-width;
     border-bottom: $card-border-width solid $card-border-color;

     .navbar-header {
          display: flex;
          margin: 0 auto;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
     }

     // Search
     .app-search {

          .form-control {
               border: none;
               padding-left: 40px;
               padding-right: 15px;
               background-color: $topbar-search-bg;
               box-shadow: none;
               height: 38px;
               border-radius: 20px;
          }

          .search-widget-icon {
               position: absolute;
               z-index: 10;
               font-size: 18px;
               left: 11px;
               top: 50%;
               color: $gray-500;
               transform: translateY(-50%);
               cursor: pointer;
          }

          .search-widget-icon-close {
               right: 7px;
               left: auto !important;
          }
     }


     .topbar-item {
          display: flex;
          align-items: center;
          justify-content: center;
          height: $topbar-height;

          .topbar-button {
               border: none;
               border-radius: 50%;
               background-color: $topbar-search-bg;
               transition: all 0.3s ease-in-out;
               color: $topbar-item-color;
               padding: $btn-padding-y $btn-padding-y;
               position: relative;

               &.show,
               &.active,
               &:active,
               &:hover {
                    color: $primary;
               }
          }
     }

     .topbar-badge {
          right: -7px;
          top: 7px !important;
     }
}


// fullscreen exit icon
[data-toggle="fullscreen"] {
     .fullscreen {
          display: block;
     }
     
     .quit-fullscreen {
          display: none;
     }
}

.fullscreen-enable {
     .fullscreen {
          display: none;
     }
     
     .quit-fullscreen {
          display: block;
     }
}


// Dark Mode Icon
.app-topbar {
     #light-dark-mode {
          .light-mode {
               display: block;
          }

          .dark-mode {
               display: none;
          }
     }
}

[data-bs-theme="dark"] {
     .app-topbar {
          #light-dark-mode {
               .light-mode {
                    display: none;
               }
     
               .dark-mode {
                    display: block;
               }
          }
     }
}


html[data-sidebar-size="hidden"] {
     .app-topbar {
          padding: 0 $spacer * 0.5;
     }
}


// @include media-breakpoint-down(md) {
@media (max-width: 375px) {
     .app-topbar {
          padding: 0 0.5 * $spacer !important;
     }
}

@media (max-width: 600px) {
     .app-topbar {
          .dropdown {
               position: static;

               .dropdown-menu {
                    width: 100%;
               }
          }
     }
}