@mantine/core/cjs/components/Chip/Chip.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Chip.module.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n  --chip-size-xs: 23px;\n  --chip-size-sm: 28px;\n  --chip-size-md: 32px;\n  --chip-size-lg: 36px;\n  --chip-size-xl: 40px;\n\n  --chip-icon-size-xs: 9px;\n  --chip-icon-size-sm: 12px;\n  --chip-icon-size-md: 14px;\n  --chip-icon-size-lg: 16px;\n  --chip-icon-size-xl: 18px;\n\n  --chip-padding-xs: 16px;\n  --chip-padding-sm: 20px;\n  --chip-padding-md: 24px;\n  --chip-padding-lg: 28px;\n  --chip-padding-xl: 32px;\n\n  --chip-checked-padding-xs: 8.2px;\n  --chip-checked-padding-sm: 10px;\n  --chip-checked-padding-md: 11.7px;\n  --chip-checked-padding-lg: 13.5px;\n  --chip-checked-padding-xl: 15.7px;\n\n  --chip-spacing-xs: 10px;\n  --chip-spacing-sm: 12px;\n  --chip-spacing-md: 16px;\n  --chip-spacing-lg: 20px;\n  --chip-spacing-xl: 22px;\n\n  --chip-size: var(--chip-size-sm);\n  --chip-icon-size: var(--chip-icon-size-sm);\n  --chip-padding: var(--chip-padding-sm);\n  --chip-spacing: var(--chip-spacing-sm);\n  --chip-checked-padding: var(--chip-checked-padding-sm);\n  --chip-bg: var(--mantine-primary-color-filled);\n  --chip-hover: var(--mantine-primary-color-filled-hover);\n  --chip-color: var(--mantine-color-white);\n  --chip-bd: 1px solid transparent;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  border-radius: var(--chip-radius, 1000rem);\n  height: var(--chip-size);\n  font-size: var(--chip-fz, var(--mantine-font-size-sm));\n  line-height: calc(var(--chip-size) - rem(2px));\n  padding-inline: var(--chip-padding);\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-checked]) {\n    padding-inline: var(--chip-checked-padding);\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    color: var(--mantine-color-disabled-color);\n  }\n}\n\n.label--outline:not([data-disabled]) {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    border: var(--chip-bd);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    color: var(--chip-color);\n    background-color: var(--chip-bg);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.iconWrapper {\n  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  height: var(--chip-icon-size);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.checkIcon {\n  width: var(--chip-icon-size);\n  height: var(--chip-icon-size);\n  display: block;\n  color: var(--chip-icon-color, inherit);\n}\n\n.input {\n  width: 0;\n  height: 0;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus-visible + .label {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n"],"mappings":""}