Passing variables to mixin in LESS

I'm fairly new to LESS and mixins but i'm trying to generate a mixin to dynamicly generate some classes with certain variables. The mixin below is not working properly. Could anyone point me in the right direction please ?

@colors: primary, secondary, succes, info, warning, danger;

.create-inbox(@index) when (@index > 0) {
    @color: extract(@colors, @index);

    .inbox-@{color}-lighten {
        --var-inbox-color: var(--var-@{color});
        background-color: var(--var-@{color}-bg-subtle); // Doesn't work from this point on

        &[href] {
            color: var(--var-@{color});
            text-decoration: none;
            background-color: var(--var-@{color}-bg-subtle);

            &:is(:hover, :focus) {
                color: var(--var-@{color});
                text-decoration: none;
                background-color: var(--var-@{color}-bg-subtle)
            }
        }
    }

    .create-inbox(@index - 1);
}

.create-inbox(length(@colors));

The wished result is as followed:

.inbox-primary-lighten {
    --var-inbox-color: var(--var-primary);
    background-color: var(--var-primary-bg-subtle)
}

.inbox-primary-lighten[href] {
    color: var(--var-primary);
    text-decoration: none;
    background-color: var(--var-primary-bg-subtle)
}

.inbox-primary-lighten[href]:is(:hover, :focus) {
    color: var(--var-primary);
    text-decoration: none;
    background-color: var(--var-primary-bg-subtle)
}

Consider escaping the var() values that are using variable interpolation:

@colors: primary, secondary, succes, info, warning, danger;

.create-inbox(@index) when (@index > 0) {
    @color: extract(@colors, @index);

    .inbox-@{color}-lighten {
        --var-inbox-color: var(--var-@{color});
        background-color: var(~"--var-@{color}-bg-subtle");

        &[href] {
            color: var(~"--var-@{color}");
            text-decoration: none;
            background-color: var(~"--var-@{color}-bg-subtle");

            &:is(:hover, :focus) {
                color: var(~"--var-@{color}");
                text-decoration: none;
                background-color: var(~"--var-@{color}-bg-subtle")
            }
        }
    }

    .create-inbox(@index - 1);
}

.create-inbox(length(@colors));

See it working in this Less Preview.