@aplus-frontend/ui/es/src/business/ap-value-select-card/style/index.mjs

import { genComponentStyleHook as e } from "../../../utils/cssinjs/index.mjs";
const l = (r) => {
  const { componentCls: o } = r;
  return {
    [o]: {
      position: "relative",
      marginBlockStart: r.space,
      ".ant-popover": {
        width: "100%"
      },
      [`${o}-list`]: {
        display: "grid",
        gridTemplateColumns: "repeat(var(--ap-value-select-card-column-count, 5), minmax(var(--ap-value-select-card-max-width, 150px), 1fr))",
        gridAutoRows: "1fr",
        gap: r.spaceLG,
        "&-item": {
          position: "relative",
          boxSizing: "border-box",
          paddingInline: r.spaceXL,
          paddingBlock: r.space,
          color: r.textColor2,
          border: `${r.lineWidth} ${r.lineType} ${r.borderColorBase}`,
          borderRadius: r.borderRadius,
          cursor: "pointer",
          "&-close": {
            position: "absolute",
            top: r.space,
            lineHeight: r.lineHeight,
            right: r.spaceMD,
            zIndex: 1,
            color: r.textColor3,
            fontSize: r.fontSizeLG,
            cursor: "pointer",
            "&:hover": {
              color: r.colorError
            }
          },
          ".label": {
            marginBlockEnd: r.spaceXS,
            fontSize: r.fontSize,
            lineHeight: r.lineHeight
          },
          ".value": {
            overflow: "hidden",
            fontWeight: "bold",
            fontSize: r.fontSizeXL,
            whiteSpace: "nowrap",
            textOverflow: "ellipsis"
          },
          "&:hover:not(.select)": {
            border: `${r.lineWidth} ${r.lineType} ${r.colorPrimary}`
          },
          "&.select": {
            color: r.textColor1,
            borderColor: "transparent",
            boxShadow: "3px 10px 30px -2px rgba(123, 121, 140, 0.15)",
            background: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--ap-value-select-card-bg-color, #f5f9ff) 92%)",
            "&:hover": {
              background: "var(--ap-value-select-card-bg-color, #f5f9ff)"
            }
          },
          "&.all": {
            color: r.textColor2,
            background: "#fff",
            border: `${r.lineWidth} ${r.lineType} ${r.borderColorBase}`,
            boxShadow: "none",
            "&:hover:not(.disabled)": {
              borderColor: r.colorPrimary
            },
            "&.disabled": {
              color: r.textColor3,
              background: r.colorBg2,
              cursor: "not-allowed",
              border: `${r.lineWidth} ${r.lineType} ${r.borderColorBase}`
            },
            "&.select": {
              backgroundColor: r.calc(r.colorPrimary).colorMix(3, "#fff"),
              borderColor: r.colorPrimary,
              cursor: "pointer",
              color: r.textColor2
            }
          },
          "&.choose": {
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            color: r.colorPrimary,
            background: "#fff",
            border: `${r.lineWidth} dashed #d1d7df`,
            boxShadow: "none",
            ".text": {
              fontSize: r.fontSize,
              marginInlineStart: r.spaceXS
            }
          }
        }
      },
      [`${o}-title`]: {
        display: "flex",
        alignItems: "center",
        marginBlockEnd: r.spaceLG,
        color: r.textColor2,
        fontSize: r.fontSize,
        "&-icon": {
          marginRight: r.spaceXS,
          color: r.textColor4,
          fontSize: r.fontSizeLG
        }
      }
    }
  };
}, a = e("ApValueSelectCard", (r) => [
  l(r)
]);
export {
  a as default
};