/*/
 * SVG ICON  v0.0.1
 * Copyright 2023 The Monjur Akhter
/*/
.si-search {
    mask: url('search.svg') no-repeat center;
    -webkit-mask: url('search.svg') no-repeat center
}

.si-cart {
    mask: url('cart.svg') no-repeat center;
    -webkit-mask: url('cart.svg') no-repeat center
}

.si-cart-check {
    mask: url('cart-check.svg') no-repeat center;
    -webkit-mask: url('cart-check.svg') no-repeat center
}

.si-cart-empty {
    mask: url('empty-cart.svg') no-repeat center;
    -webkit-mask: url('empty-cart.svg') no-repeat center
}

.si-language {
    mask: url('language.svg') no-repeat center;
    -webkit-mask: url('language.svg') no-repeat center
}

.si-love {
    mask: url('love.svg') no-repeat center;
    -webkit-mask: url('love.svg') no-repeat center
}

.si-user {
    mask: url('user.svg') no-repeat center;
    -webkit-mask: url('user.svg') no-repeat center
}

.si-user-check {
    mask: url('user-check.svg') no-repeat center;
    -webkit-mask: url('user-check.svg') no-repeat center
}

.si-user-heart {
    mask: url('user-heart.svg') no-repeat center;
    -webkit-mask: url('user-heart.svg') no-repeat center
}

.si-logout {
    mask: url('logout.svg') no-repeat center;
    -webkit-mask: url('logout.svg') no-repeat center
}

.si-close {
    mask: url('close.svg') no-repeat center;
    -webkit-mask: url('close.svg') no-repeat center
}

.si-google {
    mask: url('google.svg') no-repeat center;
    -webkit-mask: url('google.svg') no-repeat center
}

.si-facebook {
    mask: url('facebook.svg') no-repeat center;
    -webkit-mask: url('facebook.svg') no-repeat center
}

.si-instagram {
    mask: url('instagram.svg') no-repeat center;
    -webkit-mask: url('instagram.svg') no-repeat center
}

.si-pinterest {
    mask: url('pinterest.svg') no-repeat center;
    -webkit-mask: url('pinterest.svg') no-repeat center
}

.si-phone {
    mask: url('phone.svg') no-repeat center;
    -webkit-mask: url('phone.svg') no-repeat center
}

.si-email {
    mask: url('email.svg') no-repeat center;
    -webkit-mask: url('email.svg') no-repeat center
}

.si-menu {
    mask: url('menu.svg') no-repeat center;
    -webkit-mask: url('menu.svg') no-repeat center
}

.si-home {
    mask: url('home.svg') no-repeat center;
    -webkit-mask: url('home.svg') no-repeat center
}

.si-check {
    mask: url('check.svg') no-repeat center;
    -webkit-mask: url('check.svg') no-repeat center
}

.si-shipping-box {
    mask: url('shipping-box.svg') no-repeat center;
    -webkit-mask: url('shipping-box.svg') no-repeat center
}

.si-trash {
    mask: url('trash.svg') no-repeat center;
    -webkit-mask: url('trash.svg') no-repeat center
}

.si-heart-broken {
    mask: url('heart-broken.svg') no-repeat center;
    -webkit-mask: url('heart-broken.svg') no-repeat center
}

.si-my-order {
    mask: url('my-order.svg') no-repeat center;
    -webkit-mask: url('my-order.svg') no-repeat center
}

.si-edit {
    mask: url('edit.svg') no-repeat center;
    -webkit-mask: url('edit.svg') no-repeat center
}

.si-location-plus {
    mask: url('location-plus.svg') no-repeat center;
    -webkit-mask: url('location-plus.svg') no-repeat center
}

.si-circle {
    mask: url('circle.svg') no-repeat center;
    -webkit-mask: url('circle.svg') no-repeat center
}

.si-circle-outline {
    mask: url('circle-outline.svg') no-repeat center;
    -webkit-mask: url('circle-outline.svg') no-repeat center
}
.si-help {
    mask: url('message-circle-question.svg') no-repeat center;
    -webkit-mask: url('message-circle-question.svg') no-repeat center
}
.si-message-empty{
    mask: url('empty-message.svg') no-repeat center;
    -webkit-mask: url('empty-message.svg') no-repeat center
}
.si-message-check{
    mask: url('message-circle-check.svg') no-repeat center;
    -webkit-mask: url('message-circle-check.svg') no-repeat center
}
.si-message-heart{
    mask: url('message-circle-heart.svg') no-repeat center;
    -webkit-mask: url('message-circle-heart.svg') no-repeat center
}
.si-message-plus{
    mask: url('message-circle-plus.svg') no-repeat center;
    -webkit-mask: url('message-circle-plus.svg') no-repeat center
}
.si-back{
    mask: url('backward.svg') no-repeat center;
    -webkit-mask: url('backward.svg') no-repeat center
}
.si-list{
    mask: url('list-ul.svg') no-repeat center;
    -webkit-mask: url('list-ul.svg') no-repeat center
}
.si-menu-alt{
    mask: url('menu-alt.svg') no-repeat center;
    -webkit-mask: url('menu-alt.svg') no-repeat center
}


:root {
    --icon-size: 16px;
}

.si {
    width: var(--icon-size);
    height: var(--icon-size);
    display: flex;
    background: #333;
    mask-size: cover;
}

.si.si-white {
    background: #fff;
}

.si.si-danger {
    background: #e70000;
}

.si.si-10 {
    width: calc(var(--icon-size) - 6px);
    height: calc(var(--icon-size) - 6px);
}

.si.si-12 {
    width: calc(var(--icon-size) - 4px);
    height: calc(var(--icon-size) - 4px);
}

.si.si-14 {
    width: calc(var(--icon-size) - 2px);
    height: calc(var(--icon-size) - 2px);
}

.si.si-18 {
    width: calc(2px + var(--icon-size));
    height: calc(2px + var(--icon-size));
}

.si.si-20 {
    width: calc(4px + var(--icon-size));
    height: calc(4px + var(--icon-size));
}

.si.si-22 {
    width: calc(6px + var(--icon-size));
    height: calc(6px + var(--icon-size));
}

.si.si-24 {
    width: calc(8px + var(--icon-size));
    height: calc(8px + var(--icon-size));
}

.si.si-26 {
    width: calc(10px + var(--icon-size));
    height: calc(10px + var(--icon-size));
}

.si.si-28 {
    width: calc(12px + var(--icon-size));
    height: calc(12px + var(--icon-size));
}

.si.si-30 {
    width: calc(14px + var(--icon-size));
    height: calc(14px + var(--icon-size));
}

.si.si-32 {
    width: calc(16px + var(--icon-size));
    height: calc(16px + var(--icon-size));
}