/**
 * Ikonky - SVG ikony s možností měnit barvu pomocí CSS
 * 
 * Použití: <span class="icon icon--nazev"></span>
 * Barva: dědí currentColor nebo použij modifikátor (icon--primary, icon--secondary, icon--white)
 */

/* Základní třída pro ikony */
.icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    width: 24px;
    height: 24px;
}

/* Velikosti ikon */
.icon--sm {
    width: 16px;
    height: 16px;
}

.icon--md {
    width: 24px;
    height: 24px;
}

.icon--lg {
    width: 32px;
    height: 32px;
}

.icon--xl {
    width: 48px;
    height: 48px;
}

/* Barvy ikon */
.icon--primary {
    background-color: var(--color-primary) !important;
}
a:hover .icon--primary {
    background-color: var(--color-btn-primary-bg-hover) !important;
}

.icon--secondary {
    background-color: var(--color-secondary) !important;
}
.icon--tertiary {
    background-color: var(--color-tertiary) !important;
}
a:hover .icon--secondary {
    background-color: var(--color-btn-secondary-bg-hover) !important;
}
a:hover .icon--tertiary {
    background-color: var(--color-btn-tertiary-bg-hover) !important;
}
.icon--white {
    background-color: var(--color-primary-text) !important;
}

.icon--muted {
    background-color: var(--color-text-muted) !important;
}

.icon--success {
    background-color: var(--color-success) !important;
}

.icon--danger {
    background-color: var(--color-danger) !important;
}

.icon--warning {
    background-color: var(--color-warning) !important;
}
button .icon, a .icon {
    width: 20px;
    height: 20px;
}
button .icon.icon--krizek, a .icon.icon--krizek {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    position: relative;
    top: 0px
}
button .icon.icon--fajfka, a .icon.icon--fajfka {
    width: 16px;
    height: 16px;
}
button .icon.icon--plus, a .icon.icon--plus {
    width: 16px;
    height: 16px;
}

/* Ikony podle názvu */
.icon--edit { -webkit-mask-image: url('/assets/icons/edit.svg'); mask-image: url('/assets/icons/edit.svg'); }
.icon--home { -webkit-mask-image: url('/assets/icons/home.svg'); mask-image: url('/assets/icons/home.svg'); }
.icon--klienti { -webkit-mask-image: url('/assets/icons/klienti.svg'); mask-image: url('/assets/icons/klienti.svg'); }
.icon--lekari { -webkit-mask-image: url('/assets/icons/lekari.svg'); mask-image: url('/assets/icons/lekari.svg'); }
.icon--logout { -webkit-mask-image: url('/assets/icons/logout.svg'); mask-image: url('/assets/icons/logout.svg'); }
.icon--logy { -webkit-mask-image: url('/assets/icons/logy.svg'); mask-image: url('/assets/icons/logy.svg'); }
.icon--manualy { -webkit-mask-image: url('/assets/icons/manualy.svg'); mask-image: url('/assets/icons/manualy.svg'); }
.icon--nastaveni { -webkit-mask-image: url('/assets/icons/nastaveni.svg'); mask-image: url('/assets/icons/nastaveni.svg'); }
.icon--objednavky { -webkit-mask-image: url('/assets/icons/objednavky.svg'); mask-image: url('/assets/icons/objednavky.svg'); }
.icon--produkty { -webkit-mask-image: url('/assets/icons/produkty.svg'); mask-image: url('/assets/icons/produkty.svg'); }
.icon--uzivatel { -webkit-mask-image: url('/assets/icons/uzivatel.svg'); mask-image: url('/assets/icons/uzivatel.svg'); }
.icon--uzivatele { -webkit-mask-image: url('/assets/icons/uzivatele.svg'); mask-image: url('/assets/icons/uzivatele.svg'); }
.icon--zarizeni { -webkit-mask-image: url('/assets/icons/zarizeni.svg'); mask-image: url('/assets/icons/zarizeni.svg'); }
.icon--delete { -webkit-mask-image: url('/assets/icons/delete.svg'); mask-image: url('/assets/icons/delete.svg'); }
.icon--zamek { -webkit-mask-image: url('/assets/icons/zamek.svg'); mask-image: url('/assets/icons/zamek.svg'); }
.icon--pridat_klienty { -webkit-mask-image: url('/assets/icons/pridat_klienty.svg'); mask-image: url('/assets/icons/pridat_klienty.svg'); }
.icon--sipka { -webkit-mask-image: url('/assets/icons/sipka.svg'); mask-image: url('/assets/icons/sipka.svg'); }
.icon--krizek { -webkit-mask-image: url('/assets/icons/krizek.svg'); mask-image: url('/assets/icons/krizek.svg'); }
.icon--potvrdit { -webkit-mask-image: url('/assets/icons/potvrdit.svg'); mask-image: url('/assets/icons/potvrdit.svg'); }
.icon--plus { -webkit-mask-image: url('/assets/icons/plus.svg'); mask-image: url('/assets/icons/plus.svg'); }
.icon--chevron-down { -webkit-mask-image: url('/assets/icons/sipka.svg'); mask-image: url('/assets/icons/sipka.svg'); transform: rotate(-90deg); }
.icon--chevron-up {-webkit-mask-image: url('/assets/icons/sipka.svg'); mask-image: url('/assets/icons/sipka.svg'); transform: rotate(90deg); }
.icon--thumbs-up { -webkit-mask-image: url('/assets/icons/thumbs-up.svg'); mask-image: url('/assets/icons/thumbs-up.svg'); }
.icon--thumbs-down { -webkit-mask-image: url('/assets/icons/thumbs-down.svg'); mask-image: url('/assets/icons/thumbs-down.svg'); }
.icon--info {-webkit-mask-image: url('/assets/icons/info.svg'); mask-image: url('/assets/icons/info.svg');}
.icon--user-menu { -webkit-mask-image: url('/assets/icons/user-menu.svg'); mask-image: url('/assets/icons/user-menu.svg'); }
.icon--login-error { -webkit-mask-image: url('/assets/icons/login-error.svg'); mask-image: url('/assets/icons/login-error.svg'); }
.icon--fajfka { -webkit-mask-image: url('/assets/icons/fajfka.svg'); mask-image: url('/assets/icons/fajfka.svg'); }
.icon--sidebar_arrow { -webkit-mask-image: url('/assets/icons/sidebar_arrow.svg'); mask-image: url('/assets/icons/sidebar_arrow.svg'); }
.icon--print { -webkit-mask-image: url('/assets/icons/print.svg'); mask-image: url('/assets/icons/print.svg'); }
.icon--export { -webkit-mask-image: url('/assets/icons/print.svg'); mask-image: url('/assets/icons/print.svg'); }
.icon--check { -webkit-mask-image: url('/assets/icons/fajfka_kolecko.svg'); mask-image: url('/assets/icons/fajfka_kolecko.svg'); }
.icon--save { -webkit-mask-image: url('/assets/icons/save.svg'); mask-image: url('/assets/icons/save.svg'); }
.icon--upload { -webkit-mask-image: url('/assets/icons/upload.svg'); mask-image: url('/assets/icons/upload.svg'); }
.icon--import { -webkit-mask-image: url('/assets/icons/upload.svg'); mask-image: url('/assets/icons/upload.svg'); }
.icon--oziveni { -webkit-mask-image: url('/assets/icons/oziveni.svg'); mask-image: url('/assets/icons/oziveni.svg'); }
.icon--hvezda { -webkit-mask-image: url('/assets/icons/hvezda.svg'); mask-image: url('/assets/icons/hvezda.svg'); }
.icon--pridat_produkt {-webkit-mask-image: url('/assets/icons/pridat_produkt.svg'); mask-image: url('/assets/icons/pridat_produkt.svg');}
.icon--hledat { -webkit-mask-image: url('/assets/icons/hledat.svg'); mask-image: url('/assets/icons/hledat.svg'); }
.icon--skupina { -webkit-mask-image: url('/assets/icons/skupina.svg'); mask-image: url('/assets/icons/skupina.svg'); }
.icon--shopping-cart { -webkit-mask-image: url('/assets/icons/shopping-cart.svg'); mask-image: url('/assets/icons/shopping-cart.svg'); }
.icon--minus { -webkit-mask-image: url('/assets/icons/minus.svg'); mask-image: url('/assets/icons/minus.svg'); }
.icon--vyrobce { -webkit-mask-image: url('/assets/icons/vyrobce.svg'); mask-image: url('/assets/icons/vyrobce.svg'); }
.icon--menu { -webkit-mask-image: url('/assets/icons/menu.svg'); mask-image: url('/assets/icons/menu.svg'); }
.icon--schvaleno { -webkit-mask-image: url('/assets/icons/schvaleno.svg'); mask-image: url('/assets/icons/schvaleno.svg'); }
.icon--neschvaleno { -webkit-mask-image: url('/assets/icons/neschvaleno.svg'); mask-image: url('/assets/icons/neschvaleno.svg'); }
.icon--vybrane_zarizeni { -webkit-mask-image: url('/assets/icons/vybrane_zarizeni.svg'); mask-image: url('/assets/icons/vybrane_zarizeni.svg'); }