{"version":3,"sources":["../../src/Tabs/Tabs.css.ts"],"names":["css","vars","match","filledCss","size","__spreadProps","__spreadValues","textCss","tabListCSS","props","variantStyle"],"mappings":";6aAAA,OAAS,OAAAA,MAAW,iBACpB,OAAS,QAAAC,MAAY,sBACrB,OAAS,SAAAC,MAAa,aAItB,IAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IACxBJ,EAAI,CACF,IAAKC,EAAK,QAAQG,IAAS,QAAU,KAAO,CAAC,EAE7C,eAAgBC,EAAAC,EAAA,GACXL,EAAK,SAAS,WAAW,SAASG,IAAS,QAAU,QAAU,QAAQ,OAAO,GADnE,CAGd,QAASF,EAAME,CAAI,EAChB,KAAK,QAAS,IAAM,GAAGH,EAAK,QAAQ,CAAC,CAAC,IAAIA,EAAK,QAAQ,CAAC,CAAC,EAAE,EAC3D,KAAK,SAAU,IAAM,GAAGA,EAAK,QAAQ,CAAC,CAAC,IAAIA,EAAK,QAAQ,CAAC,CAAC,EAAE,EAC5D,KAAK,QAAS,IAAM,GAAGA,EAAK,QAAQ,CAAC,CAAC,IAAIA,EAAK,QAAQ,CAAC,CAAC,EAAE,EAC3D,WAAW,EAEd,IAAKA,EAAK,QAAQG,IAAS,UAAYA,IAAS,QAAU,EAAI,IAAI,EAElE,WAAY,iCAEZ,yCAA0C,CACxC,gBAAiBH,EAAK,SAAS,MAAM,cACrC,MAAOA,EAAK,SAAS,MAAM,YAE3B,IAAK,CACH,MAAOA,EAAK,SAAS,MAAM,WAC7B,CACF,EAEA,kDAAmD,CACjD,gBAAiBA,EAAK,SAAS,MAAM,sBACvC,EAEA,0DAA2D,CACzD,gBAAiBA,EAAK,SAAS,MAAM,qBACrC,iCAAkC,CAChC,gBAAiBA,EAAK,SAAS,MAAM,qBACvC,CACF,EAEA,aAAc,CACZ,gBAAiB,cACjB,MAAOA,EAAK,SAAS,MAAM,aAE3B,IAAK,CACH,MAAOA,EAAK,SAAS,MAAM,YAC7B,CACF,EAEA,aAAcA,EAAK,QAAQG,IAAS,QAAU,QAAU,QAAQ,CAClE,EACF,CAAC,EAEGG,EAAU,CAAC,CAAE,KAAAH,CAAK,IACtBJ,EAAIK,EAAAC,EAAA,GACCJ,EAAME,CAAI,EACV,KAAK,QAAS,IAAOE,EAAA,CACpB,IAAKL,EAAK,QAAQ,CAAC,GAChBA,EAAK,SAAS,WAAW,aAAa,EACzC,EACD,KAAK,SAAU,IAAOK,EAAA,CACrB,IAAKL,EAAK,QAAQ,CAAC,GAChBA,EAAK,SAAS,WAAW,cAAc,EAC1C,EACD,KAAK,SAAU,IAAOK,EAAA,CACrB,IAAKL,EAAK,QAAQ,CAAC,GAChBA,EAAK,SAAS,WAAW,mBAAmB,EAC/C,EACD,KAAK,UAAW,IAAOK,EAAA,CACtB,IAAKL,EAAK,QAAQ,CAAC,GAChBA,EAAK,SAAS,WAAW,oBAAoB,EAChD,EACD,WAAW,GAlBZ,CAoBF,eAAgB,CACd,QAAS,GAAGA,EAAK,QAAQG,IAAS,SAAW,IAAM,GAAG,CAAC,KACvD,IAAKH,EAAK,QAAQG,IAAS,SAAW,EAAI,IAAI,EAE9C,WAAY,sBACZ,MAAOH,EAAK,SAAS,MAAM,QAE3B,IAAK,CACH,MAAOA,EAAK,SAAS,MAAM,OAC7B,EAEA,yCAA0C,CACxC,MAAOA,EAAK,SAAS,MAAM,KAE3B,IAAK,CACH,MAAOA,EAAK,SAAS,MAAM,IAC7B,CACF,EAEA,0DAA2D,CACzD,MAAOA,EAAK,SAAS,MAAM,KAE3B,IAAK,CACH,MAAOA,EAAK,SAAS,MAAM,IAC7B,CACF,EAEA,aAAc,CACZ,MAAOA,EAAK,SAAS,MAAM,aAC3B,OAAQ,cAER,IAAK,CACH,MAAOA,EAAK,SAAS,MAAM,YAC7B,CACF,CACF,CACF,EAAC,EAEUO,EAAcC,GAA6D,CACtF,IAAMC,EAAeR,EAAMO,CAAK,EAC7B,KAAK,CAAE,QAAS,QAAS,EAAGN,CAAS,EACrC,KAAK,CAAE,QAAS,MAAO,EAAGI,CAAO,EACjC,WAAW,EAEd,OAAOP,EAAIM,EAAA,CACT,eAAgB,CACd,KAAMG,EAAM,UAAY,EAAI,MAC9B,GAEGC,EACJ,CACH","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport { match } from \"ts-pattern\";\nimport type { PickRequired } from \"../types\";\nimport type { FilledTabsProps, TabsProps, TextTabsProps } from \"./Tabs.types\";\n\nconst filledCss = ({ size }: PickRequired<FilledTabsProps, \"size\">) =>\n  css({\n    gap: vars.spacing[size === \"large\" ? \"15\" : 1],\n\n    '[role=\"tab\"]': {\n      ...vars.semantic.typography[`label-${size === \"large\" ? \"large\" : \"medium\"}-bold`],\n\n      padding: match(size)\n        .with(\"small\", () => `${vars.spacing[1]} ${vars.spacing[3]}`)\n        .with(\"medium\", () => `${vars.spacing[2]} ${vars.spacing[3]}`)\n        .with(\"large\", () => `${vars.spacing[3]} ${vars.spacing[4]}`)\n        .exhaustive(),\n\n      gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n      transition: \"background-color 0.3s ease-out\",\n\n      '&:not(:disabled)[data-selected=\"true\"]': {\n        backgroundColor: vars.semantic.color.actionPrimary,\n        color: vars.semantic.color.textInverse,\n\n        svg: {\n          color: vars.semantic.color.iconInverse,\n        },\n      },\n\n      '&:not(:disabled, [data-selected=\"true\"]):active': {\n        backgroundColor: vars.semantic.color.actionSecondaryPressed,\n      },\n\n      '&:not([data-selected=\"true\"], :active, :disabled):hover': {\n        backgroundColor: vars.semantic.color.actionSecondaryHover,\n        '& [data-clay-badge-on=\"false\"]': {\n          backgroundColor: vars.semantic.color.actionPrimaryDisabled,\n        },\n      },\n\n      \"&:disabled\": {\n        backgroundColor: \"transparent\",\n        color: vars.semantic.color.textDisabled,\n\n        svg: {\n          color: vars.semantic.color.iconDisabled,\n        },\n      },\n\n      borderRadius: vars.rounded[size === \"small\" ? \"small\" : \"medium\"],\n    },\n  });\n\nconst textCss = ({ size }: PickRequired<TextTabsProps, \"size\">) =>\n  css({\n    ...match(size)\n      .with(\"large\", () => ({\n        gap: vars.spacing[4],\n        ...vars.semantic.typography[\"label-large\"],\n      }))\n      .with(\"medium\", () => ({\n        gap: vars.spacing[3],\n        ...vars.semantic.typography[\"label-medium\"],\n      }))\n      .with(\"xlarge\", () => ({\n        gap: vars.spacing[5],\n        ...vars.semantic.typography[\"label-xlarge-bold\"],\n      }))\n      .with(\"2xlarge\", () => ({\n        gap: vars.spacing[6],\n        ...vars.semantic.typography[\"label-3xlarge-bold\"],\n      }))\n      .exhaustive(),\n\n    '[role=\"tab\"]': {\n      padding: `${vars.spacing[size === \"medium\" ? \"2\" : \"3\"]} 0`,\n      gap: vars.spacing[size === \"medium\" ? 1 : \"15\"],\n\n      transition: \"color 0.3s ease-out\",\n      color: vars.semantic.color.textSub,\n\n      svg: {\n        color: vars.semantic.color.iconSub,\n      },\n\n      '&:not(:disabled)[data-selected=\"true\"]': {\n        color: vars.semantic.color.text,\n\n        svg: {\n          color: vars.semantic.color.icon,\n        },\n      },\n\n      '&:not([data-selected=\"true\"], :active, :disabled):hover': {\n        color: vars.semantic.color.text,\n\n        svg: {\n          color: vars.semantic.color.icon,\n        },\n      },\n\n      \"&:disabled\": {\n        color: vars.semantic.color.textDisabled,\n        cursor: \"not-allowed\",\n\n        svg: {\n          color: vars.semantic.color.iconDisabled,\n        },\n      },\n    },\n  });\n\nexport const tabListCSS = (props: Pick<TabsProps, \"variant\" | \"size\" | \"fullWidth\">) => {\n  const variantStyle = match(props)\n    .with({ variant: \"filled\" }, filledCss)\n    .with({ variant: \"text\" }, textCss)\n    .exhaustive();\n\n  return css({\n    '[role=\"tab\"]': {\n      flex: props.fullWidth ? 1 : \"auto\",\n    },\n\n    ...variantStyle,\n  });\n};\n"]}