DatePicker Styling

[RyuuTakahashi74]

im using mantine V7.13

<DatePicker
      onChange={handleDatePick}
      defaultValue={new Date()}
      locale="jp"
      styles={{
        calendarHeaderControl: {
          width: 32,
          height: 32,
        },
        monthCell: {
          width: 40,
          height: 40,
          borderRadius: 1,
        },
        day: {
          backgroundColor: "green",
          color: "white",
          fontWeight: "bolder",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          width: "100%",
          "[data-today]": {
            backgroundColor: "yellow",
          },
        },
      }}
    />

my code here for styling DatePicker.
how can style for data-outside and data-today and hover on it.
i'm trying to style in prop styles but it doesn't work

[rtivital]

https://help.mantine.dev/q/nested-inline-styles