When using _groupChcked and _groupDisabled nested, the style of the _groupDisabled state is not applied.

[with-key]

const checkboxCardIndicatorReciep = cva({
  base: {
    flex: "0 0 auto",
    width: 24,
    height: 24,
    borderRadius: "semantic.07",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",

    bg: "semantic.bg.sub04",
    color: "semantic.icon.white",

    _groupChecked: {
      bg: "semantic.bg.primary",
      color: "semantic.icon.white",
    },

    _groupDisabled: {
      bg: "semantic.bg.disabled", // not apply
      color: "semantic.bg.disabled", // not apply
      border: "semantic.border.disabled",

      _groupChecked: {
        bg: "semantic.bg.primary",
        color: "semantic.icon.white",
      },
    },
  },
});

hello!!

If you write and apply a cva as per the code above, when both “checked” and “disabled” are met, the disabled style will not be applied - only the “checked” style will be applied.

To solve this, you can apply the following to fix the issue. Is it possible to implement this with the selector provided by “panda”?

const checkboxCardIndicatorReciep = cva({
  base: {
    flex: "0 0 auto",
    width: 24,
    height: 24,
    borderRadius: "semantic.07",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",

    bg: "semantic.bg.sub04",
    color: "semantic.icon.white",

    ".group:is([data-state='checked']) &": {
      bg: "semantic.bg.primary",
      color: "semantic.icon.white",
    },

    ".group:is([data-state='checked'][data-disabled]) &": {
      bg: "semantic.bg.sub04",
      color: "semantic.icon.disabled",
    },

    _groupDisabled: {
      bg: "semantic.bg.disabled",
      color: "semantic.bg.disabled",
      border: "semantic.border.disabled",
    },
  },
});

[with-key]

Looking again, it's only _groupChecked that has the problem, _checked is fine.