/* Global icon styles. Pair with css/icons.svg sprite.
   Usage: <svg class="icon"><use href="css/icons.svg#icon-name"/></svg>

   Size utilities: combine with .icon, e.g. <svg class="icon icon-md">…
   Without a size class, the icon inherits 1em (scales with parent font-size).
*/
:root {
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  --icon-size-2xl: 48px;
}

.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-xs  { width: var(--icon-size-xs);  height: var(--icon-size-xs); }
.icon-sm  { width: var(--icon-size-sm);  height: var(--icon-size-sm); }
.icon-md  { width: var(--icon-size-md);  height: var(--icon-size-md); }
.icon-lg  { width: var(--icon-size-lg);  height: var(--icon-size-lg); }
.icon-xl  { width: var(--icon-size-xl);  height: var(--icon-size-xl); }
.icon-2xl { width: var(--icon-size-2xl); height: var(--icon-size-2xl); }