_hover has a higher priority than _active

[Lamonin]

I am writing the following styles for the element:

const tabStyles = cva({
    base: {
        userSelect: "none",
        p: 2,
        borderRadius: "md",
        minW: "fit-content",
        transition: "background-color 0.1s",
        bgColor: {
            base: "transparent",
            _hover: "slate.3",
            _active: "slate.5",
        },
    },
    variants: {
        active: {
            true: {
                bgColor: "blue.4",
            },
        },
    },
});

From my point of view, the color written in _active should be applied over the color in _hover, because _active is written lower, and from the point of view of logic, it has a higher priority. However, for some reason, the color from _hover has a higher priority than the color in _active, and I have to write styles like this:

bgColor: {
    base: "transparent",
    _hover: { base: "slate.3", _active: "slate.5" },
    _active: "slate.5",
},