@define-mixin icon $name {

    @for $i from 1 to 4 {
       .monster-icon-primary-$(i)-$(name)::before {
            background-color: var(--monster-color-primary-$i);
            color: var(--monster-bg-color-primary-$i);
        }

        .monster-icon-secondary-$(i)-$(name)::before {
            background-color: var(--monster-color-secondary-$i);
            color: var(--monster-bg-color-secondary-$i);
        }
    
        .monster-icon-tertiary-$(i)-$(name)::before {
            background-color: var(--monster-color-tertiary-$i);
            color: var(--monster-bg-color-tertiary-$i);
        }
    
        .monster-icon-secondary-$(i)-$(name)::before {
            background-color: var(--monster-color-secondary-$i);
            color: var(--monster-bg-color-secondary-$i);
        }
    
        .monster-icon-primary-$(i)-$(name)::before,
        .monster-icon-secondary-$(i)-$(name)::before,
        .monster-icon-tertiary-$(i)-$(name)::before {
            content: "";
            display: inline-block;
            width: 1em;
            height: 1em;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            @mixin-content;
        }

    }
}