How to create buttons variations with mixins less

Question

I have a use case where I need to create variations of buttons in the CMS platforms, So I basically have three kinds of buttons types:

1. button-primary (a button with rounded borders and background color and text in the middle and it may also have an icon depending on whether it is authored or not).

2. button-secondary (a button with just the rounded borders and no background color and text in the middle and it may also have an icon depending on whether it is authored or not).

3. button-Teritary (a button with just the text in the middle and it may also have an icon depending on whether it is authored or not) and moreover I have four sizes small, medium, large, and Xlarge where we have the font-size, line-height, border-radius and the paddings for the each. and next, we have the text-colors, background-colors, border-colors for each individual button of each color type. My Doubt is how can I use Mixins or any other less features which I can use to get 34Number of colors(4) i.e in total 48 variations of buttons.

This is the CSS below which I have written till I need the logic by which I achieve these variations in the most efficient way

// to restrict the buttons size in mobile and not in desktop
.width-restrict{
    min-width: 295px;
    @media(@aboveMobile){
        min-width: unset;
    }
}

// base class which will have structure related styles
.btn{
    .cmp-button{
        text-transform: none;
        letter-spacing: 0;
        display:inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        text-align: center;
        .width-restrict();
              .link-icon-img{
          padding-left: 6px;
      }
    }
}

//button small styles
.btn-small{
    .cmp-button{
        padding: 8px 12px;
        font-size: 13/@rem;
        line-height: 15/@rem;
        border-radius: 32px;
    }
}

//button medium styles
.btn-medium{
    .cmp-button{
        padding: 8px 16px;
        font-size:15/@rem;
        line-height: 18/@rem;
        border-radius: 36px;
    }
}

//button-large-styles
.btn-large{
    .cmp-button{
        padding: 12px 24px;
        font-size:17/@rem;
        line-height: 20/@rem;
        border-radius: 44px;
    }
}

//button-xl-styles
.btn-xl{
    .cmp-button{
        padding:14px 32px;
        font-size:20/@rem;
        line-height:23/@rem;
        border-radius: 54px;
    }
}

//Types of buttons
//button primary where it should have the background color, text color, and border color coming in as variables depending on the color type button we select.
.btn-primary{
    .cmp-button{

    }
}

//button secondary
.btn-secondary{
    .cmp-button{

    }
}

//button tertiary
.btn-tertiary{
    .cmp-button{
     
    }
}

// button color variable values for each type of button which can accommodate all variations for a single color

.btn-color-green{
  @text-color-primary:@variable1
  @text-color-primary:@varaibel2
  @background-color-primary:@variable3
  @background-color-secondary:@variable4
  @border-color-primary:@variable5
  @border-color-secondary:@variable6
}

.btn-color-black{

}

.btn-color-yellow{

}

.btn-color-purple{
    
}

I was thinking of a solution in such a way that these classes with color names containing variables be sent as an input to the button primary, secondary or tertiary such that these classes can only pick the necessary variables required and add them to the CSS properties.

Please forgive me for the length of the question, thanks in advance.