/* ============================================================
   GENERIC ICON SYSTEM
   Uses CSS mask-image to color SVGs dynamically.
   Works in Chrome, Safari, Firefox, Edge.
   ============================================================ */

.icon {
    display: inline-block;
    width: 18px;
    height: 18px;

    background-color: currentColor;
    color: #ffffff;

    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-type: luminance;

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-type: luminance;
}

/* ============================
   COLOR VARIANTS
   ============================ */

.icon-black {
    color: #212121;
}
.icon-white {
    color: #f7f7f7;
}
.icon-orange {
    color: #f67f3a;
}
.icon-blue {
    color: #295aa2;
}

/* ============================
   INDIVIDUAL ICONS
   Includes both mask-image and -webkit-mask-image
   ============================ */

/* Chat */
.icon-chat-left-text {
    -webkit-mask-image: url("/assets/gsh/icons/chat-left-text.svg");
    mask-image: url("/assets/gsh/icons/chat-left-text.svg");
}

.icon-chat-left-text-fill {
    -webkit-mask-image: url("/assets/gsh/icons/chat-left-text-fill.svg");
    mask-image: url("/assets/gsh/icons/chat-left-text-fill.svg");
}

/* Check */
.icon-check-circle {
    -webkit-mask-image: url("/assets/gsh/icons/check-circle.svg");
    mask-image: url("/assets/gsh/icons/check-circle.svg");
}

.icon-check-circle-fill {
    -webkit-mask-image: url("/assets/gsh/icons/check-circle-fill.svg");
    mask-image: url("/assets/gsh/icons/check-circle-fill.svg");
}

.icon-check-lg {
    -webkit-mask-image: url("/assets/gsh/icons/check-lg.svg");
    mask-image: url("/assets/gsh/icons/check-lg.svg");
}

/* CPU / AI */
.icon-cpu {
    -webkit-mask-image: url("/assets/gsh/icons/cpu.svg");
    mask-image: url("/assets/gsh/icons/cpu.svg");
}

.icon-cpu-fill {
    -webkit-mask-image: url("/assets/gsh/icons/cpu-fill.svg");
    mask-image: url("/assets/gsh/icons/cpu-fill.svg");
}

/* Envelope */
.icon-envelope-at {
    -webkit-mask-image: url("/assets/gsh/icons/envelope-at.svg");
    mask-image: url("/assets/gsh/icons/envelope-at.svg");
}

.icon-envelope-at-fill {
    -webkit-mask-image: url("/assets/gsh/icons/envelope-at-fill.svg");
    mask-image: url("/assets/gsh/icons/envelope-at-fill.svg");
}

/* Warnings / Info */
.icon-exclamation-triangle {
    -webkit-mask-image: url("/assets/gsh/icons/exclamation-triangle.svg");
    mask-image: url("/assets/gsh/icons/exclamation-triangle.svg");
}

.icon-exclamation-circle {
    -webkit-mask-image: url("/assets/gsh/icons/exclamation-circle.svg");
    mask-image: url("/assets/gsh/icons/exclamation-circle.svg");
}

.icon-info-circle {
    -webkit-mask-image: url("/assets/gsh/icons/info-circle.svg");
    mask-image: url("/assets/gsh/icons/info-circle.svg");
}

/* List */
.icon-list {
    -webkit-mask-image: url("/assets/gsh/icons/list.svg");
    mask-image: url("/assets/gsh/icons/list.svg");
}

/* Phone */
.icon-phone {
    -webkit-mask-image: url("/assets/gsh/icons/phone.svg");
    mask-image: url("/assets/gsh/icons/phone.svg");
}

.icon-phone-fill {
    -webkit-mask-image: url("/assets/gsh/icons/phone-fill.svg");
    mask-image: url("/assets/gsh/icons/phone-fill.svg");
}

/* Three dots */
.icon-three-dots {
    -webkit-mask-image: url("/assets/gsh/icons/three-dots.svg");
    mask-image: url("/assets/gsh/icons/three-dots.svg");
}

/* Close / X */
.icon-x-lg {
    -webkit-mask-image: url("/assets/gsh/icons/x-lg.svg");
    mask-image: url("/assets/gsh/icons/x-lg.svg");
}

/* Chevrons */
.icon-chevron-left {
    -webkit-mask-image: url("/assets/gsh/icons/chevron-left.svg");
    mask-image: url("/assets/gsh/icons/chevron-left.svg");
}

.icon-chevron-right {
    -webkit-mask-image: url("/assets/gsh/icons/chevron-right.svg");
    mask-image: url("/assets/gsh/icons/chevron-right.svg");
}

.icon-chevron-up {
    -webkit-mask-image: url("/assets/gsh/icons/chevron-up.svg");
    mask-image: url("/assets/gsh/icons/chevron-up.svg");
}

.icon-chevron-down {
    -webkit-mask-image: url("/assets/gsh/icons/chevron-down.svg");
    mask-image: url("/assets/gsh/icons/chevron-down.svg");
}

.icon-facebook {
    -webkit-mask-image: url("/assets/gsh/icons/facebook.svg");
    mask-image: url("/assets/gsh/icons/facebook.svg");
}