/*


        ico - базовый клас иконки 
        (--ico-size: размер иконки, по умолчанию 32X32)
        

           если хотим поменять блочно то в нутри файла svg указываем обьектам классы: o1, o2, o3...

        Цвет линий  по умолчанию - тот что указн в файле svg (черный, синий...)
            1)если хотим поменять все линии: >>> !обьекту svg указываем классы: li-red  или  li-white

            2)если хотим поменять обьекты : обьекту svg указываем классы: [обьект]-[цвет]   к примеру:  li1-red, li2-green

            3) обьекту svg указываем классы  которые хотим насторить li1-cfg или li2-cfg или li3-cfg... (тогда будет пременен белый цвет линий)
                 если хотим поменять на конкретный цвет, то --ico-color-li1: цвет линий класса line1; --ico-color-li2: цвет линий класса line2..

        Цвет заливки  по умолчанию - тот что указн в файле svg (синий, none...)
           если хотим поменять:
           1)если хотим поменять все : >>> !обьекту svg указываем классы: bg-red  или  bg-white
           2) обьекту svg указываем классы: [обьект]-[цвет]   к примеру:  bg1-red
           3)  которые хотим настраевыемый цвет то указываем класс bg1-cfg или bg2-cfg или bg3-cfg... (тогда будет пременен белый цвет заливки)
               чтобы указать конкретный цвет --ico-color-bg1: XXX; --ico-color-bg2: XXX..
          


               [EL].style.setProperty('--var-width', ЗНАЧЕНИЕ   );

*/

.ico {
    width: var(--ico-size, 32px); height: var(--ico-size, 32px);
    display: inline-block; vertical-align: middle;
}


.ico.li-red  g { stroke:red; }
.ico.li-green  g { stroke:green; }
.ico.li-lime  g { stroke:lime; }
.ico.li-blue  g { stroke:blue; }
.ico.li-black  g { stroke:black; }
.ico.li-white  g { stroke:white; }
.ico.li-dirtywhite  g { stroke:rgb(221, 217, 217); }
.ico.li-cfg  g { stroke:var(--ico-color-li, black);  }

.ico.bg-red  g { fill:red; }
.ico.bg-green g { fill:green; }
.ico.bg-lime g { fill:lime; }
.ico.bg-blue  g{ fill:blue; }
.ico.bg-black  g { fill:black; }
.ico.bg-white  g { fill:white; }
.ico.bg-dirtyblue g { fill:#3c8dbc; }
.ico.bg-none g { fill:none; }
.ico.bg-cfg  g { fill:var(--ico-color-bg, black);  }

.ico.li1-red .o1, .ico.li2-red .o2, .ico.li3-red .o3 { stroke:red; }
.ico.li1-green .o1, .ico.li2-green .o2, .ico.li3-green .o3 { stroke:green; }
.ico.li1-lime .o1, .ico.li2-lime .o2, .ico.li3-lime .o3 { stroke:lime; }
.ico.li1-blue .o1, .ico.li2-blue .o2, .ico.li3-blue .o3 { stroke:blue; }
.ico.li1-black .o1, .ico.li2-black .o2, .ico.li3-black .o3 { stroke:black; }
.ico.li1-white .o1, .ico.li2-white .o2, .ico.li3-white .o3 { stroke:white; }
.ico.li1-dirtyblue .o1, .ico.li2-dirtyblue .o2, .ico.li3-dirtyblue .o3 { stroke:#3c8dbc; }
.ico.li1-cfg .o1 { stroke:var(--ico-color-li1, black);  }
.ico.li2-cfg .o2 { stroke:var(--ico-color-li2, black);  }
.ico.li3-cfg .o3 { stroke:var(--ico-color-li3, black);  }

.ico.li1-hide .o1, .ico.li2-hide .o2, .ico.li3-hide .o3 { display:none; }


.ico.bg1-red .o1, .ico.bg2-red .o2, .ico.bg3-red .o3 { fill:red; }
.ico.bg1-green .o1, .ico.bg2-green .o2, .ico.bg3-green .o3 { fill:green; }
.ico.bg1-lime .o1, .ico.bg2-lime .o2, .ico.bg3-lime .o3 { fill:lime; }
.ico.bg1-blue .o1, .ico.bg2-blue .o2, .ico.bg3-blue .o3 { fill:blue; }
.ico.bg1-black .o1, .ico.bg2-black .o2, .ico.bg3-black .o3 { fill:black; }
.ico.bg1-white .o1, .ico.bg2-white .o2, .ico.bg3-white .o3 { fill:white; }
.ico.bg1-none .o1, .ico.bg2-none .o2, .ico.bg3-none .o3 { fill:none; }
.ico.bg1-cfg .o1 { fill:var(--ico-color-bg1, black);  }
.ico.bg2-cfg .o2 { fill:var(--ico-color-bg2, black);  }
.ico.bg3-cfg .o3 { fill:var(--ico-color-bg3, black);  }