@layer components {
  .app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    min-height: 3.75rem;
    padding: var(--space-2) var(--space-4);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);

    @media (min-width: 768px) {
      padding: var(--space-2) var(--space-8);
    }

    /* Mobile menu toggle button */
    .sidebar-toggle {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      padding: 0;
      color: var(--color-text);
      background: transparent;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;

      &:hover {
        background: var(--color-gray-100);
      }

      svg {
        width: 1.5rem;
        height: 1.5rem;
      }

      svg path {
        stroke: currentColor;
      }

      @media (min-width: 768px) {
        display: none;
      }
    }

    .user-and-account {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--space-1);

      .btn--icon-only {
        color: var(--color-text-muted);

        svg path {
          stroke: currentColor;
        }

        &:hover {
          color: var(--color-text);
        }
      }
    }
  }
}