clash-verge-rev/src/components/test/test-box.tsx

import { alpha, Box, styled } from "@mui/material";

export const TestBox = styled(Box)(({ theme, "aria-selected": selected }) => {
  const { mode, primary, text } = theme.palette;
  const key = `${mode}-${!!selected}`;

  const backgroundColor =
    mode === "light" ? alpha(primary.main, 0.05) : alpha(primary.main, 0.08);

  const color = {
    "light-true": text.secondary,
    "light-false": text.secondary,
    "dark-true": alpha(text.secondary, 0.65),
    "dark-false": alpha(text.secondary, 0.65),
  }[key]!;

  const h2color = {
    "light-true": primary.main,
    "light-false": text.primary,
    "dark-true": primary.main,
    "dark-false": text.primary,
  }[key]!;

  return {
    position: "relative",
    width: "100%",
    display: "block",
    cursor: "pointer",
    textAlign: "left",
    borderRadius: 8,
    boxShadow: theme.shadows[1],
    padding: "8px 16px",
    boxSizing: "border-box",
    backgroundColor,
    color,
    "& h2": { color: h2color },
    transition: "background-color 0.3s, box-shadow 0.3s",
    "&:hover": {
      backgroundColor:
        mode === "light" ? alpha(primary.main, 0.1) : alpha(primary.main, 0.15),
      boxShadow: theme.shadows[2],
    },
  };
});