/* style */
.icon-wrapper.outline svg path {
  fill: none;
  stroke: black;
  stroke-width: 4%;
  stroke-linejoin: round;
  paint-order: stroke;
}

.icon-wrapper.outline svg {
  overflow: visible;
}

/* demo */
.red {
  fill: red;
}

.outline.red svg path {
  stroke: red;
}

.white {
  fill: white;
}

.outline.white svg path {
  stroke: white;
}

.green {
  fill: green;
}

.outline.green svg path {
  stroke: green;
}

.purple {
  fill: purple;
}

.outline.purple {
  stroke: purple;
}

/* Wrapper Core */
.icon-wrapper {
  display: inline-flex;
  align-self: center;
  align-items: center;
  /*height: 1em; NO, it shrinks buttons with padding */
      min-width: 1em;
}

.icon-wrapper svg{
  width: auto;
  /* 
  height: 100%;
  nope .. too much complicted to get the right parent height depending on context */
  height: 1em;
  aspect-ratio: 1;
  fill: currentColor;
  top: -0.02em;
  /*Warning, there are 2 types of possible use : 
    * Wrap the icon in wrapper and put text OUTSIDE . like <p> text <div class=wrapper"><svg>. --> in this case, you have to move icons DOWN. google says 11.5% of the type size. But some others say 12,5% https: //blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 https: //codepen.io/elliotdahl/pen/ygYrvm  .. it's around 12% 
    * Add text inside wrapper, what we are doing here. like <a data-icon="fa-X" class="wrapper"><svg> .. --> in this case it"s already almost ok, just move them up a slightly bit. 
    */
  position: relative;
}

.icon-wrapper.icon-before svg {
  margin-right: 0.25em;
}

.icon-wrapper.icon-after svg {
  margin-left: 0.25em;
}

/*
placeholder while icon is loading.
Won't work on firefox, so it will be more jumpty horizontally.
https: //caniuse.com/css-has
*/

.icon-wrapper.icon-before:not(:has(svg)):before,
.icon-wrapper.icon-after:not(:has(svg)):after {
  content: " ";
  width: auto;
  /* 
  height: 100%;
  nope .. too much complicted to get the right parent height depending on context */
  height: 1em;
  aspect-ratio: 1;
  fill: currentColor;
  top: -0.02em;
  /*Warning, there are 2 types of possible use : 
    * Wrap the icon in wrapper and put text OUTSIDE . like <p> text <div class=wrapper"><svg>. --> in this case, you have to move icons DOWN. google says 11.5% of the type size. But some others say 12,5% https: //blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 https: //codepen.io/elliotdahl/pen/ygYrvm  .. it's around 12% 
    * Add text inside wrapper, what we are doing here. like <a data-icon="fa-X" class="wrapper"><svg> .. --> in this case it"s already almost ok, just move them up a slightly bit. 
    */
  position: relative;
}

.icon-wrapper.icon-before:not(:has(svg)):before {
  margin-right: 0.25em;
}

.icon-wrapper.icon-before:not(:has(svg)):after {
  margin-left: 0.25em;
}

/* NOWRAP -> no icon wrapper (not possible to align with text) */


.icon-wrapper.circle {
  border: 1px solid currentColor;
  border-radius: 50%;
  aspect-ratio: 1;
  padding: 0.4em;

  &:hover {
    background-color: white;
    color: var(--currentbgcolor, darkslategray);
  }
}

/* DEMO 
*[data-icon="search"] {
  color: purple;
  fill: purple;
  --svg-path: "https: //fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/search/wght600/48px.svg";
}
*/