.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    mask-repeat: no-repeat;
    mask-size: 1em 1em;
    background-color: var(--bs-body-color);

    &.icon-dashboard {
        mask-image: url("../images/icons/dashboard-e88e4350f3148f1613fdb48a957f4926.svg");
    }

    &.icon-appointment {
        mask-image: url("../images/icons/calendar-f52e996146b4d665f86bb0f9f5654d8d.svg");
    }

    &.icon-quote {
        mask-image: url("../images/icons/file-6c499591291d8966c7310ab82e286c9a.svg");
    }

    &.icon-contract {
        mask-image: url("../images/icons/pen-97d929a3204ec2be7b607ad7a8b16bb4.svg");
    }

    &.icon-installation {
        mask-image: url("../images/icons/lamp-74991b6695a790d5d442d993dbb2fa7b.svg");
    }

    &.icon-service {
        mask-image: url("../images/icons/wrench-5405f573667175f6184c33f9333fcbfb.svg");
    }

    &.icon-map-marker {
        mask-image: url("../images/icons/map-marker-369f29bfeab0808d70c7487598ae1397.svg");
    }
}

.icon-circle {
    border-radius: 50%;
    background-color: var(--ssg-green);
    width: 2em;
    height: 2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;


    i {
        color: var(--bs-white);
        font-size: 1.3em;
    }

    &:hover {
        opacity: 0.8;
    }
}