// Keyboard key component - Display keyboard shortcuts

/**
 * @section Keyboard Key
 */

/** @public Keyboard key display - monospace with 3D appearance */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: var(--spacing-1) var(--spacing-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  box-shadow: 
    0 1px 0 0 hsl(var(--border)),
    inset 0 1px 0 0 hsl(var(--background) / 0.1);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;

  // Dark mode adjustments
  .dark &,
  [data-theme="dark"] & {
    background-color: hsl(var(--muted) / 0.5);
    border-color: hsl(var(--border) / 0.7);
    box-shadow: 
      0 1px 0 0 hsl(var(--border) / 0.5),
      inset 0 1px 0 0 hsl(var(--foreground) / 0.05);
  }
}

/** @public Small keyboard key */
.kbd-sm {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: var(--spacing-0-5) var(--spacing-1);
  font-size: 0.625rem;
}

/** @public Large keyboard key */
.kbd-lg {
  min-width: 2rem;
  height: 2rem;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-sm);
}