/* =================================================================
  almost minimal HTML5
  inline, change-able SVG icons

Define colors, e.g:
  --icon-main: blue;
  --icon-accent: orange;
  --icon-main-hover: red;
  --icon-accent-hover: green;

==================================================================  */

@layer defaults {
:root {
  --icon-main: #74a40e;
  --icon-accent: rgba(139, 222, 24, 0.854); 
  --icon-main-hover: #AE00D9;
  --icon-accent-hover: #f7c0f3;
}

.icon {
  width: 1.6em;
  height: 1.6em;
  vertical-align: middle;
  color: var(--icon-main);
  fill: none;
  transition: 0.6s ease;
}

/* fill|stroke icons */
.icon-fill path { fill: currentColor;  stroke: none; }
.icon-stroke path { fill: none !important; stroke: currentColor; }

/* two color icons */
.icon-fill .icon-main   { fill: var(--icon-main); }
.icon-fill .icon-accent { fill: var(--icon-accent); }

.icon-stroke .icon-main { stroke: var(--icon-main);}
.icon-stroke .icon-accent { stroke: var(--icon-accent); }

/* ==================================================================  */
/* secure wrong fill for stroke Icons                                  */
/* ==================================================================  */

.icon-stroke path,
.icon-stroke rect,
.icon-stroke line {
  fill: none !important;
}

/* ==================================================================  */
/* hover switch: brighter / explicit hoover color                      */
/* ==================================================================  */

/* brighter hoover color: */
/*
.icon:hover {  filter: brightness(1.3); }
.icon:hover .icon-accent { filter: brightness(1.3); }
.icon:hover .icon-main   { filter: brightness(1.3);}
*/

/* explicit hoover color  */
.icon:hover { color: var(--icon-main-hover); }

/* Fill-Icons */
.icon-fill:hover .icon-main { fill: var(--icon-main-hover); }
.icon-fill:hover .icon-accent { fill: var(--icon-accent-hover); }

/* Stroke-Icons */
.icon-stroke:hover .icon-main { stroke: var(--icon-main-hover); }
.icon-stroke:hover .icon-accent { stroke: var(--icon-accent-hover); }

/* ==================================================================  */

}