{"version":3,"sources":["../../../src/Button/IconButton/IconButton.css.ts"],"names":["css","vars","match","color","typography","spacing","rounded","medium","large","small","tiny","sizeStyles","outlined","primary","args","secondary","critical","accent","iconButtonCSS","props","fullWidth","size","variantStyle"],"mappings":"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","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ElementType } from \"react\";\nimport { match } from \"ts-pattern\";\nimport type { IconButtonProps } from \"./IconButton.types\";\n\nconst {\n  semantic: { color, typography },\n  spacing,\n  rounded,\n} = vars;\n\nconst medium = css`\n  padding: ${spacing[3]};\n  border-radius: ${rounded.medium};\n  ${typography[\"label-medium\"]}\n`;\n\nconst large = css`\n  padding: ${vars.spacing[4]};\n  border-radius: ${vars.rounded.medium};\n\n  ${typography[\"label-large\"]}\n`;\n\nconst small = css`\n  padding: ${vars.spacing[2]};\n  border-radius: ${vars.rounded.small};\n\n  ${typography[\"label-medium\"]}\n`;\n\nconst tiny = css`\n  padding: ${vars.spacing[15]};\n  border-radius: ${vars.rounded.small};\n\n  ${typography[\"label-small\"]}\n`;\n\nexport const sizeStyles = {\n  medium,\n  large,\n  small,\n  tiny,\n};\n\nconst outlined = () =>\n  css({\n    \"--clay-icon-button-background-color\": color.actionSecondary,\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-button-background-color)\",\n\n    color: color.textSecondary,\n    svg: {\n      color: color.iconSecondary,\n    },\n\n    outline: `1px solid ${color.border}`,\n    outlineOffset: \"-1px\",\n\n    \"&:hover:not(:disabled)\": {\n      outlineColor: color.borderHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      outlineColor: color.borderSub,\n    },\n\n    \"&:disabled\": {\n      \"--clay-icon-button-background-color\": color.actionSecondaryDisabled,\n\n      color: color.textDisabled,\n      outlineColor: \"transparent\",\n      svg: {\n        color: color.textDisabled,\n      },\n\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-icon-button-background-color\": color.actionSecondary,\n\n        color: color.textSecondary,\n        outlineColor: color.borderSub,\n        svg: {\n          color: color.icon,\n        },\n      },\n    },\n  });\n\nconst primary = <E extends ElementType>(\n  args?: Extract<IconButtonProps<E>, { variant: \"primary\" }>,\n) =>\n  css({\n    \"--clay-icon-button-background-color\": args?.tonal\n      ? color.actionPrimaryTonal\n      : color.actionPrimary,\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-button-background-color)\",\n\n    color: args?.tonal ? color.textSecondary : color.textInverse,\n    svg: {\n      color: args?.tonal ? color.iconSecondary : color.iconInverse,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionPrimaryTonalHover\n        : color.actionPrimaryHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionPrimaryTonalPressed\n        : color.actionPrimaryPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-icon-button-background-color\": args?.tonal\n          ? color.actionPrimaryTonalDisabled\n          : color.actionPrimaryDisabled,\n\n        svg: {\n          color: color.textDisabled,\n        },\n      },\n\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-icon-button-background-color\": args?.tonal\n          ? color.actionPrimaryTonalPressed\n          : color.actionPrimaryPressed,\n\n        color: args?.tonal ? color.textSecondary : color.textInverse,\n        svg: {\n          color: args?.tonal ? color.icon : color.iconOn,\n        },\n      },\n    },\n  });\n\nconst secondary = () =>\n  css({\n    \"--clay-icon-button-background-color\": \"transparent\",\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-button-background-color)\",\n\n    color: color.textSecondary,\n    svg: {\n      color: color.iconSecondary,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": color.actionSecondaryHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": color.actionSecondaryPressed,\n    },\n\n    \"&:disabled\": {\n      \"--clay-icon-button-background-color\": color.actionSecondaryDisabled,\n\n      color: color.textDisabled,\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-icon-button-background-color\": \"transparent\",\n\n        color: color.textSecondary,\n        svg: {\n          color: color.icon,\n        },\n      },\n    },\n  });\n\nconst critical = <E extends ElementType>(\n  args?: Extract<IconButtonProps<E>, { variant: \"critical\" }>,\n) =>\n  css({\n    \"--clay-icon-button-background-color\": args?.tonal\n      ? color.actionCriticalTonal\n      : color.actionCritical,\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-button-background-color)\",\n\n    color: args?.tonal ? color.textCritical : color.textOn,\n    svg: {\n      color: args?.tonal ? color.iconCritical : color.iconOn,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionCriticalTonalHover\n        : color.actionCriticalHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionCriticalTonalPressed\n        : color.actionCriticalPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-icon-button-background-color\": args?.tonal\n          ? color.actionCriticalTonalDisabled\n          : color.actionCriticalDisabled,\n\n        stroke: color.textDisabled,\n      },\n\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-icon-button-background-color\": args?.tonal\n          ? color.actionCriticalTonalPressed\n          : color.actionCriticalPressed,\n\n        color: args?.tonal ? color.textCritical : color.textOn,\n        svg: {\n          color: args?.tonal ? color.iconCritical : color.iconOn,\n        },\n      },\n    },\n  });\n\nconst accent = <E extends ElementType>(args?: Extract<IconButtonProps<E>, { variant: \"accent\" }>) =>\n  css({\n    \"--clay-icon-button-background-color\": args?.tonal\n      ? color.actionAccentTonal\n      : color.actionAccent,\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-button-background-color)\",\n\n    color: args?.tonal ? color.textAccent : color.text,\n    svg: {\n      color: args?.tonal ? color.iconAccent : color.icon,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionAccentTonalHover\n        : color.actionAccentHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionAccentTonalPressed\n        : color.actionAccentPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-icon-button-background-color\": args?.tonal\n          ? color.actionAccentTonalDisabled\n          : color.actionAccentDisabled,\n\n        stroke: color.textDisabled,\n      },\n\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-icon-button-background-color\": args?.tonal\n          ? color.actionAccentTonalPressed\n          : color.actionAccentPressed,\n\n        color: args?.tonal ? color.textAccent : color.text,\n        svg: {\n          color: args?.tonal ? color.iconAccent : color.icon,\n        },\n      },\n    },\n  });\n\nexport const iconButtonCSS = <E extends ElementType>(props: IconButtonProps<E>) => {\n  const { fullWidth, rounded, size = \"medium\" } = props;\n\n  const variantStyle = match(props)\n    .with({ variant: \"primary\" }, primary)\n    .with({ variant: \"secondary\" }, secondary)\n    .with({ variant: \"critical\" }, critical)\n    .with({ variant: \"accent\" }, accent)\n    .with({ variant: \"outlined\" }, outlined)\n    .exhaustive();\n\n  return css`\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    ${sizeStyles[size]};\n\n    ${variantStyle};\n    ${rounded && `border-radius: ${vars.rounded.full};`}\n\n    width: ${fullWidth ? \"100%\" : \"fit-content\"};\n    height: fit-content;\n\n    transition-timing-function: ease-out;\n    transition-duration: 100ms;\n    transition-property: background-color, color;\n  `;\n};\n"]}