/**
 * Control Pane Responsive Styles
 *
 * Implements dynamic responsive label visibility for toolbar buttons
 * - Labels are hidden/shown based on available horizontal space
 * - Priority system determines which buttons show labels first
 * - No empty space left when labels are hidden
 */

/* ==========================================================================
   Base Button Label Styles - Dynamic System
   ========================================================================== */

/* All labels are hidden by default, shown via .show-label class */
.control-pane .btn-label-wide,
.control-pane .btn-label-medium {
  display: none;
  margin-left: 4px;
  white-space: nowrap;
}

/* When a button has show-label class, display the appropriate label tier */
.control-pane .show-label .btn-label-wide {
  display: inline;
}

.control-pane .show-label .btn-label-medium {
  display: none;
}

/* AI Answer button labels - dual-span responsive approach */
.ai-answer-btn .icon-label-full,
.ai-answer-btn .icon-label-short {
  margin-left: 4px;
  white-space: nowrap;
}

/* Default: show short label only */
.ai-answer-btn .icon-label-short {
  display: inline;
}

.ai-answer-btn .icon-label-full {
  display: none;
}

/* When button has show-label class, show full label */
.ai-answer-btn.show-label .icon-label-short {
  display: none;
}

.ai-answer-btn.show-label .icon-label-full {
  display: inline;
}

/* AI Answer button height override - match standard 30px button height */
.control-pane .ai-answer-btn::part(base) {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}

/* ==========================================================================
   Toolbar Spacing
   ========================================================================== */

.control-pane {
  padding: 0px;
  gap: 8px;
}

.control-pane .sub-pane {
  gap: 8px;
}

/* ==========================================================================
   Checkmark Indicators for Toggle States
   ========================================================================== */

/* Add checkmark to compact view menu item when active */
sl-menu-item#compactViewMenuItem[data-checked="true"]::part(base)::before {
  content: "✓ ";
  font-weight: bold;
  margin-right: 4px;
}

/* Add checkmark to full screen menu item when active */
sl-menu-item#fullScreenMenuItem[data-checked="true"]::part(base)::before {
  content: "✓ ";
  font-weight: bold;
  margin-right: 4px;
}

/* ==========================================================================
   History Menu Item - Selection Dependent State
   ========================================================================== */

/* Disabled state for history menu item when no single item selected */
sl-menu-item#historyMenuItem[data-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}