/* ==========================================================================
     Top Navigation Bar
     ========================================================================== */

// ==========================================================================
//   Topbar Variables
// ==========================================================================

$topbar-badge-size: 0.75rem !default;
$topbar-badge-padding: 2px 4px !default;
$topbar-badge-top: 9px !default;

$search-toggle-max-width: 200px !default;
$search-toggle-padding: 0.35rem 1rem !default;
$search-toggle-font-size: 0.875rem !default;

$search-shortcut-padding: 0.125rem 0.375rem !default;
$search-shortcut-font-size: 0.75rem !default;

// ==========================================================================
//   Topbar Base Styles
// ==========================================================================

.topbar {
  height: var(--topbar-height);
  color: var(--topbar-color);
  background: var(--topbar-bg);
  @include transition(background-color 0.3s ease);

  .sidebar-toggle {
    color: var(--sidebar-color);
    @include transition(all 0.3s ease);

    &:hover {
      opacity: 0.8;
      transform: scale(1.1);
    }
  }
}

.topbar-badge {
  top: $topbar-badge-top !important;
  padding: $topbar-badge-padding;
  font-size: $topbar-badge-size;
}

/* Search Styles */
.search-toggle {
  position: relative;
  max-width: $search-toggle-max-width;
  padding: $search-toggle-padding !important;
  font-size: $search-toggle-font-size;
  color: var(--bs-body-color);
  background-color: var(--bs-secondary-bg);
  @include border-radius($border-radius-lg);
  @include transition(all 0.3s ease);

  &:hover {
    background-color: var(--bs-tertiary-bg);

    .search-shortcut {
      color: var(--bs-body-color);
      background-color: var(--bs-secondary-bg);
    }
  }

  .search-placeholder {
    flex: 1 1 auto;
    color: var(--bs-secondary-color);
  }

  .search-shortcut {
    padding: $search-shortcut-padding;
    margin-inline-start: auto;
    font-size: $search-shortcut-font-size;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    @include border-radius($border-radius-sm);
    @include transition(
      color 0.3s ease,
      background-color 0.3s ease
    );
  }
}

/* Responsive adjustments */
@include media-breakpoint-down(sm) {
  .search-toggle {
    max-width: 100%;

    .search-shortcut {
      display: none;
    }
  }
}
