/* SVG Icon Styles
 * ==========================================================================
 * Consistent styling for monochrome stroke-based SVG icons.
 * Icons inherit color from parent text color.
 * ========================================================================== */

.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
}

.svg-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size variants */
.svg-icon--xs {
  width: 0.75em;
  height: 0.75em;
}

.svg-icon--sm {
  width: 0.875em;
  height: 0.875em;
}

.svg-icon--md {
  width: 1em;
  height: 1em;
}

.svg-icon--lg {
  width: 1.25em;
  height: 1.25em;
}

.svg-icon--xl {
  width: 1.5em;
  height: 1.5em;
}

/* Fixed pixel sizes for specific contexts */
.svg-icon--14 {
  width: 14px;
  height: 14px;
}

.svg-icon--16 {
  width: 16px;
  height: 16px;
}

.svg-icon--20 {
  width: 20px;
  height: 20px;
}

.svg-icon--24 {
  width: 24px;
  height: 24px;
}

/* Icon with text spacing */
.svg-icon + span,
span + .svg-icon {
  margin-left: 0.35em;
}

/* Button icon styling */
.btn .svg-icon,
button .svg-icon {
  margin-right: 0.35em;
}

/* Panel header icons */
.panel-header .svg-icon,
.section-header .svg-icon {
  margin-right: 0.5em;
  opacity: 0.8;
}

/* Tab icons */
.tab-icon .svg-icon {
  width: 16px;
  height: 16px;
}

/* Status indicators */
.status-icon .svg-icon {
  width: 12px;
  height: 12px;
}

/* Character class icons - slightly larger */
.class-icon .svg-icon {
  width: 1.25em;
  height: 1.25em;
}

/* Lobby action button icons (matches _lobby.css) */
.lobby-action-icon .svg-icon,
.lobby-action-icon svg {
  width: 14px;
  height: 14px;
}