/* =============================================================
   ikony.css — SVG ikony přes CSS mask-image
   Styl: Feather Icons — outline, stroke, currentColor
   Barva ikony = text color (color: currentColor / třída)

   Použití:  <span class="ikona ikona--tym"></span>
             <span class="ikona ikona--lg ikona--zelena ikona--programator"></span>

   Konzistentní s www-new — stejný systém mask-image.
   ============================================================= */

/* --- Základní třída ----------------------------------------- */
.ikona {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

/* --- Velikostní varianty ------------------------------------ */
.ikona--sm  { width: 16px; height: 16px; }
.ikona--md  { width: 24px; height: 24px; } /* výchozí */
.ikona--lg  { width: 32px; height: 32px; }
.ikona--xl  { width: 48px; height: 48px; }

/* --- Barevné varianty --------------------------------------- */
.ikona--zelena { color: #87AC3D; }
.ikona--modra  { color: #030333; }
.ikona--bila   { color: #ffffff; }


/* =============================================================
   BENEFITY — 6 ikon
   ============================================================= */

.ikona--tym {
    -webkit-mask-image: url('images/ikony/tym.svg');
            mask-image: url('images/ikony/tym.svg');
}
.ikona--hodiny {
    -webkit-mask-image: url('images/ikony/hodiny.svg');
            mask-image: url('images/ikony/hodiny.svg');
}
.ikona--domov {
    -webkit-mask-image: url('images/ikony/domov.svg');
            mask-image: url('images/ikony/domov.svg');
}
.ikona--kniha {
    -webkit-mask-image: url('images/ikony/kniha.svg');
            mask-image: url('images/ikony/kniha.svg');
}
.ikona--pohoda {
    -webkit-mask-image: url('images/ikony/pohoda.svg');
            mask-image: url('images/ikony/pohoda.svg');
}
.ikona--udalost {
    -webkit-mask-image: url('images/ikony/udalost.svg');
            mask-image: url('images/ikony/udalost.svg');
}


/* =============================================================
   POZICE — 2 ikony
   ============================================================= */

.ikona--programator {
    -webkit-mask-image: url('images/ikony/programator.svg');
            mask-image: url('images/ikony/programator.svg');
}
.ikona--konzultant {
    -webkit-mask-image: url('images/ikony/konzultant.svg');
            mask-image: url('images/ikony/konzultant.svg');
}


/* =============================================================
   NÁBOROVÝ PROCES — 6 ikon
   ============================================================= */

.ikona--zprava {
    -webkit-mask-image: url('images/ikony/zprava.svg');
            mask-image: url('images/ikony/zprava.svg');
}
.ikona--telefon {
    -webkit-mask-image: url('images/ikony/telefon.svg');
            mask-image: url('images/ikony/telefon.svg');
}
.ikona--setkani {
    -webkit-mask-image: url('images/ikony/setkani.svg');
            mask-image: url('images/ikony/setkani.svg');
}
.ikona--zkusit {
    -webkit-mask-image: url('images/ikony/zkusit.svg');
            mask-image: url('images/ikony/zkusit.svg');
}
.ikona--dohoda {
    -webkit-mask-image: url('images/ikony/dohoda.svg');
            mask-image: url('images/ikony/dohoda.svg');
}
.ikona--rust {
    -webkit-mask-image: url('images/ikony/rust.svg');
            mask-image: url('images/ikony/rust.svg');
}


/* =============================================================
   KARUSEL PŘÍBĚHŮ — 3 ikony
   ============================================================= */

.ikona--sipka-vlevo {
    -webkit-mask-image: url('images/ikony/sipka-vlevo.svg');
            mask-image: url('images/ikony/sipka-vlevo.svg');
}
.ikona--sipka-vpravo {
    -webkit-mask-image: url('images/ikony/sipka-vpravo.svg');
            mask-image: url('images/ikony/sipka-vpravo.svg');
}
.ikona--pribehy {
    -webkit-mask-image: url('images/ikony/pribehy.svg');
            mask-image: url('images/ikony/pribehy.svg');
}