Tailwind custom classes overriding using class-variance-authority

I defined the following classes on the tailwind.config.ts file

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        "light-white": "var(--light-white)",
        "light-red": "var(--light-red)",
      },
      borderWidth: {
        lg: "50px",
        "lg-long": "85px",
      },
    },
  },
  plugins: [],
};

And the following variant for a div component

const customVariants = cva("size-0", {
  variants: {
    size: {
      lg: `border-t-lg
           border-l-lg-long
           border-b-lg`,
    },
    color: {
      red: `border-t-white
           border-l-light-red
           border-b-white`,
    },
  },
});

<div className={cn(customVariants ({ color, size }))} />

When applying the variants to my component, the color classes override the size classes

Output:

<div class="size-0 border-t-white border-l-light-red border-b-white"></div>

If I swap the color and size definition positions, the size classes override the color classes

const customVariants = cva("size-0", {
  variants: {
    color: {
      red: `border-t-white
           border-l-light-red
           border-b-white`,
    },
    size: {
      lg: `border-t-lg
           border-l-lg-long
           border-b-lg`,
    },
  },
});

Output:

<div class="size-0 border-t-lg border-l-lg-long border-b-lg"></div>

It works if I apply the tailwind classes directly to the div

<div className="size-0 border-t-lg border-l-lg-long border-b-lg border-t-white border-l-light-red border-b-white" />

It also works if I remove the custom borderWidth classes (border-t-lg, border-l-lg-long and border-b-lg) from size variant

const flagVariants = cva("size-0", {
  variants: {
    color: {
      red: `border-t-white
           border-l-light-red
           border-b-white`,
    },
    size: {
      lg: `border-t-[50px]
           border-l-[85px]
           border-b-[50px]`,
    },
  },
});

Output:

<div class="size-0 border-t-white border-l-light-red border-b-white border-t-[50px] border-l-[85px] border-b-[50px]"></div>

It seem when using class-variance-authority and custom classes, tailwind thinks the border color/width are the same property, it overrides some clases and does not apply both.

In this code snippet you can see how the component should look like.

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

.bg {
  background-color: black;
  min-height: 200px;
  min-width: 200px;
  display: grid;
  place-items: center;
}

.size-0 {
  width: 0px;
  height: 0px;
}
.border-t-white {
  border-top-color: white;
}
.border-l-light-red {
  border-left-color: red;
}
.border-b-white {
  border-bottom-color: white;
}
.border-t-lg {
  border-top-width: 50px;
}
.border-l-lg-long {
  border-left-width: 85px;
}
.border-b-lg {
  border-bottom-width: 50px;
}

<div class="bg">  
  <div class="size-0 border-t-lg border-l-lg-long border-b-lg border-t-white border-l-light-red border-b-white" ></div>
</div>

How can I fix this? Thanks in advance.