/* Default icon size for all */
.icon {
  --icon-size: var(--icon-size-default, 1.2em);
  width: var(--icon-size);
  height: var(--icon-size);

  display: inline-block;
  
  /* per default, center the icons to the line middle */
  vertical-align: var(--icon-vertical-align, middle);
  
  color: var(--icon-color-default, currentColor);
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Icon styling per icon pack */
.icon-pixelarticons { 
  --icon-size: var(--icon-size-default, 1.2em);
  --icon-vertical-align: -15%;
  image-rendering: pixelated;
}

.icon-lucide { 
  /* Default icon size for lucide, if not specified in theme flavour */
  --icon-size: var(--icon-size-default, 1.3em);
  --icon-vertical-align: -15%;
}

.icon-humbleicons { 
  /* Default icon size for lucide, if not specified in theme flavour */
  --icon-size: var(--icon-size-default, 1.2em);
  --icon-vertical-align: -15%;
}

.icon-gg { 
  /* Default icon size for lucide, if not specified in theme flavour */
  --icon-size: var(--icon-size-default, 1.2em);
  --icon-vertical-align: -15%;
}


/* Icon utility classes */


.icon-primary   { color: var(--primary); }
.icon-secondary { color: var(--secondary); }
.icon-text      { color: currentColor; }
.icon-muted     { color: var(--on-surface-muted); }
.icon-info      { color: var(--on-info); }
.icon-warning   { color: var(--on-warning); }
.icon-danger    { color: var(--on-danger); }
.icon-success   { color: var(--on-success); }

/* Icon size utilities — higher specificity than .icon-<pack>
   defaults (two classes vs one), so these reliably win */
.icon.icon-xs { --icon-size: 0.75em; --icon-vertical-align: -3%; }
.icon.icon-sm { --icon-size: 1em; --icon-vertical-align: -10%; }
.icon.icon-nm { --icon-size: var(--icon-size-default); --icon-vertical-align: -15%; }
.icon.icon-md { --icon-size: 1.5em; --icon-vertical-align: -25%; }
.icon.icon-lg { --icon-size: 2em; --icon-vertical-align: -40%; }
.icon.icon-xl { --icon-size: 3em; --icon-vertical-align: -60% }