/*
 * Custom site icons
 *
 * Uses CSS mask-image to render SVGs as colorizable icons.
 * The SVG acts as a stencil — background-color provides the fill.
 * Icons defined here appear in the BlockRegistry icon picker "Site" tab.
 */

i.icon {
    --color: var(--text_color);
    --size: 24px;
    --width: var(--size);
    --height: var(--size);
    display: inline-block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ==========================================================================
   SVG Icons (/sites/default/images/svgs/)
   ========================================================================== */

.icon {
    &--basket {
        --icon: url('/sites/default/images/svgs/basket.svg');
    }
    &--box {
        --icon: url('/sites/default/images/svgs/box.svg');
    }
    &--calendar {
        --icon: url('/sites/default/images/svgs/calendar.svg');
    }
    &--consultation {
        --icon: url('/sites/default/images/svgs/consultation.svg');
    }
    &--cross {
        --icon: url('/sites/default/images/svgs/cross.svg');
    }
    &--delivery {
        --icon: url('/sites/default/images/svgs/delivery.svg');
    }
    &--doctor {
        --icon: url('/sites/default/images/svgs/doctor.svg');
    }
    &--heart {
        --icon: url('/sites/default/images/svgs/heart.svg');
    }
    &--heartHands {
        --icon: url('/sites/default/images/svgs/heart_hands.svg');
    }
    &--heartbeat {
        --icon: url('/sites/default/images/svgs/heartbeat.svg');
    }
    &--relax {
        --icon: url('/sites/default/images/svgs/relax.svg');
    }
    &--shield {
        --icon: url('/sites/default/images/svgs/shield.svg');
    }
    &--speechBubble {
        --icon: url('/sites/default/images/svgs/speech_bubble.svg');
    }
    &--tick {
        --icon: url('/sites/default/images/svgs/tick.svg');
    }
    &--tracked {
        --icon: url('/sites/default/images/svgs/tracked.svg');
    }
    &--treatments {
        --icon: url('/sites/default/images/svgs/treatments.svg');
    }
    &--user {
        --icon: url('/sites/default/images/svgs/user.svg');
    }
    &--wholePackage {
        --icon: url('/sites/default/images/svgs/whole_package.svg');
    }

    /* ==========================================================================
       UI Icons (/sites/default/images/icons/)
       ========================================================================== */

    &--bars {
        --icon: url('/sites/default/images/icons/bars.svg');
    }
    &--breadcrumbSpacer {
        --icon: url('/sites/default/images/icons/breadcrumb-spacer.svg');
    }
    &--chevron {
        --icon: url('/sites/default/images/icons/chevron.svg');
        &-down {
            --icon: url('/sites/default/images/icons/chevron-down.svg');
        }
    }
    &--close {
        --icon: url('/sites/default/images/icons/close.svg');
    }
    &--envelope {
        --icon: url('/sites/default/images/icons/envelope.svg');
    }
    &--filters {
        --icon: url('/sites/default/images/icons/filters.svg');
    }
    &--logout {
        --icon: url('/sites/default/images/icons/logout.svg');
    }
    &--longArrowRight {
        --icon: url('/sites/default/images/icons/long-arrow-right.svg');
    }
    &--minus {
        --icon: url('/sites/default/images/icons/minus.svg');
    }
    &--picture {
        --icon: url('/sites/default/images/icons/picture.svg');
    }
    &--plus {
        --icon: url('/sites/default/images/icons/plus.svg');
    }
    &--search {
        --icon: url('/sites/default/images/icons/search.svg');
    }
}
