{"version":3,"sources":["../../../src/Legacy/TabList/TabList.css.ts"],"names":["css","vars","getPaddingForSquared","size","getStyleForUnderLine","__spreadValues","segmentCSSBySize","segmentActiveColorByType","type","tabListCSS","variant","background","fullWidth","__spreadProps"],"mappings":"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","sourcesContent":["import type { CSSObject } from \"@emotion/react\";\nimport { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { LegacyTabListProps } from \"./TabList.types\";\n\nconst getPaddingForSquared = (size: LegacyTabListProps<string>[\"size\"]) => {\n  switch (size) {\n    case \"small\":\n      return `${vars.spacing[1]} ${vars.spacing[3]}`;\n\n    case \"large\":\n      return `${vars.spacing[3]} ${vars.spacing[4]}`;\n\n    // medium\n    default:\n      return `${vars.spacing[2]} ${vars.spacing[3]}`;\n  }\n};\n\nconst getStyleForUnderLine = (size: LegacyTabListProps<string>[\"size\"]) => {\n  switch (size) {\n    // underline은 small 을 지원하지 않습니다.\n    case \"small\":\n      return {};\n\n    case \"large\":\n      return {\n        gap: vars.spacing[4],\n        ...vars.semantic.typography[\"label-large\"],\n      };\n\n    case \"xlarge\":\n      return {\n        gap: vars.spacing[5],\n        ...vars.semantic.typography[\"label-xlarge-bold\"],\n      };\n\n    case \"2xlarge\":\n      return {\n        gap: vars.spacing[6],\n        ...vars.semantic.typography[\"label-3xlarge-bold\"],\n      };\n\n    // medium\n    default:\n      return {\n        gap: vars.spacing[3],\n        ...vars.semantic.typography[\"label-medium\"],\n      };\n  }\n};\n\nconst segmentCSSBySize = (size: LegacyTabListProps<string>[\"size\"]): CSSObject => {\n  switch (size) {\n    case \"small\":\n      return {\n        paddingTop: vars.spacing[1],\n        paddingBottom: vars.spacing[1],\n        minWidth: \"54px\",\n      };\n\n    case \"large\":\n      return {\n        paddingTop: vars.spacing[\"25\"],\n        paddingBottom: vars.spacing[\"25\"],\n        minWidth: \"64px\",\n      };\n\n    // medium\n    default:\n      return {\n        paddingTop: vars.spacing[\"15\"],\n        paddingBottom: vars.spacing[\"15\"],\n        minWidth: \"60px\",\n      };\n  }\n};\n\nconst segmentActiveColorByType = (type: LegacyTabListProps<string>[\"type\"]) => {\n  switch (type) {\n    case \"raised\":\n      return vars.semantic.color.text;\n\n    case \"outlined\":\n      return vars.semantic.color.textPrimary;\n\n    // primary, secondary\n    default:\n      return vars.semantic.color.textOn;\n  }\n};\n\nexport const tabListCSS = ({\n  variant,\n  size,\n  background,\n  type,\n  fullWidth,\n}: Pick<LegacyTabListProps<string>, \"variant\" | \"size\" | \"background\" | \"type\" | \"fullWidth\">) => {\n  switch (variant) {\n    case \"segment\":\n      return css({\n        backgroundColor: background ? vars.semantic.color.surfaceSub : \"transparent\",\n        padding: background ? vars.spacing[1] : 0,\n        borderRadius: vars.rounded.medium,\n\n        '[role=\"tab\"]': {\n          ...vars.semantic.typography[\"label-medium-bold\"],\n          ...segmentCSSBySize(size),\n\n          paddingLeft: vars.spacing[3],\n          paddingRight: vars.spacing[3],\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"color 0.3s ease-out\",\n          color: vars.semantic.color.textSecondary,\n          flex: fullWidth ? 1 : \"auto\",\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            color: segmentActiveColorByType(type),\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            color: vars.semantic.color.textSecondaryHover,\n          },\n        },\n      });\n    case \"squared\":\n      return css({\n        gap: vars.spacing[size === \"large\" ? \"15\" : 1],\n\n        '[role=\"tab\"]': {\n          ...vars.semantic.typography[`label-${size === \"large\" ? \"large\" : \"medium\"}`],\n\n          flex: fullWidth ? 1 : \"auto\",\n\n          padding: getPaddingForSquared(size),\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"background-color 0.3s ease-out\",\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            backgroundColor: vars.semantic.color.actionPrimary,\n            color: vars.semantic.color.textInverse,\n          },\n\n          '&:not([aria-disabled=\"true\"], [aria-selected=\"true\"]):active': {\n            backgroundColor: vars.semantic.color.actionSecondaryPressed,\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            backgroundColor: vars.semantic.color.actionSecondaryHover,\n            '& [data-clay-badge-on=\"false\"]': {\n              backgroundColor: vars.semantic.color.actionPrimaryDisabled,\n            },\n          },\n\n          '&[aria-disabled=\"true\"]': {\n            backgroundColor: \"transparent\",\n            color: vars.semantic.color.textDisabled,\n            cursor: \"not-allowed\",\n          },\n\n          borderRadius: vars.rounded[size === \"small\" ? \"small\" : \"medium\"],\n        },\n      });\n    // text tab\n    default:\n      return css({\n        gap: vars.spacing[size === \"medium\" ? 3 : 4],\n\n        ...getStyleForUnderLine(size),\n\n        '[role=\"tab\"]': {\n          flex: fullWidth ? 1 : \"auto\",\n\n          padding: `${vars.spacing[size === \"medium\" ? \"2\" : \"3\"]} 0`,\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"color 0.3s ease-out\",\n          color: vars.semantic.color.textSub,\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            color: vars.semantic.color.text,\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            color: vars.semantic.color.text,\n          },\n\n          '&[aria-disabled=\"true\"]': {\n            color: vars.semantic.color.textDisabled,\n            cursor: \"not-allowed\",\n          },\n        },\n      });\n  }\n};\n"]}