Select child class on parent hover

[jcusick93]

I am trying to select a child on the hover of a parent. I am mimicking Material's state layer which changes color or opacity on hover and pressed states.

<button disabled={disabled} className={buttonClassNames}>
      <span>{children}</span>
      {variant === "transparent" || disabled ? null : (
        <span className={stateLayerClassNames} />
      )}
</button>

I have a base class for the Button and if I use last-child I am able to select the state layer, but the state layer is conditionally rendered, so it won't work in all cases:

// base styles for button
const useStyles = makeStyles({
  button: {
    position: "relative",
    overflowX: "hidden",
    overflowY: "hidden",
    paddingRight: "12px",
    paddingLeft: "12px",
    paddingTop: "4px",
    paddingBottom: "4px",
    cursor: "pointer",
    borderTopWidth: "0px",
    borderBottomWidth: "0px",
    borderLeftWidth: "0px",
    borderRightWidth: "0px",
    fontSize: "16px",
    lineHeight: "150%",
    borderTopLeftRadius: "24px",
    borderTopRightRadius: "24px",
    borderBottomLeftRadius: "24px",
    borderBottomRightRadius: "24px",
    ":disabled": {
      cursor: "not-allowed"
    },

    ":hover": {
      "& :last-child": {
        opacity: 0
      }
    }
  },

I have base styles for the state layer and I'd like to use the button_state_layer class in the above code

  // base styles for the state layer
  button_state_layer: {
    position: "absolute",
    zIndex: 0,
    boxSizing: "border-box",
    inset: "0px"
  },

this is ideal but not working:

// base styles for button
const useStyles = makeStyles({
  button: {
    position: "relative",
    overflowX: "hidden",
    overflowY: "hidden",
    paddingRight: "12px",
    paddingLeft: "12px",
    paddingTop: "4px",
    paddingBottom: "4px",
    cursor: "pointer",
    borderTopWidth: "0px",
    borderBottomWidth: "0px",
    borderLeftWidth: "0px",
    borderRightWidth: "0px",
    fontSize: "16px",
    lineHeight: "150%",
    borderTopLeftRadius: "24px",
    borderTopRightRadius: "24px",
    borderBottomLeftRadius: "24px",
    borderBottomRightRadius: "24px",
    ":disabled": {
      cursor: "not-allowed"
    },

    ":hover": {
      button_state_layer: {
        opacity: 0
      }
    }
  },

Link to the code: https://codesandbox.io/s/theme-tokens-playground-r9yvcc?file=/src/components/Button/Button.tsx:4591-4743