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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"SemiCircleProgress.module.cjs","names":[],"sources":["../../../src/components/SemiCircleProgress/SemiCircleProgress.module.css"],"sourcesContent":[".root {\n  --scp-filled-segment-color: var(--mantine-primary-color-filled);\n  --scp-transition-duration: 0ms;\n  --scp-thickness: 12px;\n\n  @mixin where-light {\n    --scp-empty-segment-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    --scp-empty-segment-color: var(--mantine-color-dark-4);\n  }\n\n  position: relative;\n  width: fit-content;\n}\n\n.svg {\n  display: block;\n  transform: var(--scp-rotation);\n  overflow: hidden;\n}\n\n.filledSegment {\n  transition:\n    stroke-dashoffset var(--scp-transition-duration) ease,\n    stroke-dasharray var(--scp-transition-duration) ease,\n    stroke var(--scp-transition-duration);\n}\n\n.label {\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  inset-inline: 0;\n  text-align: center;\n  z-index: 1;\n\n  &:where([data-position='bottom']) {\n    bottom: 0;\n    padding-inline: calc(var(--scp-thickness) * 2);\n\n    &:where([data-orientation='down']) {\n      bottom: auto;\n      top: 0;\n    }\n  }\n\n  &:where([data-position='center']) {\n    top: 50%;\n    transform: translateY(-50%);\n    padding-inline: calc(var(--scp-thickness) * 3);\n  }\n}\n"],"mappings":""}