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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Rating.module.cjs","names":[],"sources":["../../../src/components/Rating/Rating.module.css"],"sourcesContent":[".root {\n  --rating-size-xs: 14px;\n  --rating-size-sm: 18px;\n  --rating-size-md: 20px;\n  --rating-size-lg: 28px;\n  --rating-size-xl: 32px;\n\n  display: flex;\n  width: max-content;\n\n  &:where(:has(input:disabled)) {\n    pointer-events: none;\n  }\n}\n\n.symbolGroup {\n  position: relative;\n  transition: transform 100ms ease;\n\n  &:where([data-active]) {\n    z-index: 1;\n    transform: scale(1.1);\n  }\n}\n\n.starSymbol {\n  width: var(--rating-size);\n  height: var(--rating-size);\n  display: block;\n\n  @mixin where-light {\n    fill: var(--mantine-color-gray-3);\n    stroke: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    fill: var(--mantine-color-dark-3);\n    stroke: var(--mantine-color-dark-3);\n  }\n\n  &:where([data-filled]) {\n    fill: var(--rating-color);\n    stroke: var(--rating-color);\n  }\n}\n\n.input {\n  height: 0;\n  width: 0;\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n  -webkit-tap-highlight-color: transparent;\n\n  &:focus-visible + label {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n\n.label {\n  display: block;\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: var(--rating-item-z-index, 0);\n  -webkit-tap-highlight-color: transparent;\n\n  &:where([data-read-only]) {\n    cursor: default;\n  }\n\n  &:where(:last-of-type) {\n    position: relative;\n  }\n}\n\n.symbolBody {\n  clip-path: var(--rating-symbol-clip-path);\n}\n"],"mappings":""}