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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Radio.module.cjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n  --radio-size: var(--radio-size-sm);\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n  position: relative;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.icon {\n  color: var(--radio-icon-color);\n  opacity: var(--radio-icon-opacity, 0);\n  transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n  transition:\n    opacity 100ms ease,\n    transform 200ms ease;\n  pointer-events: none;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  position: absolute;\n  top: calc(50% - var(--radio-icon-size) / 2);\n  left: calc(50% - var(--radio-icon-size) / 2);\n}\n\n.radio {\n  border: 1px solid;\n  position: relative;\n  appearance: none;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  border-radius: var(--radio-radius, var(--radio-size));\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: background-color, border-color;\n  transition-timing-function: ease;\n  transition-duration: 100ms;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:checked {\n    background-color: var(--radio-color, var(--mantine-primary-color-filled));\n    border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n    & + .icon {\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: scale(1);\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    & + .icon {\n      --radio-icon-color: var(--mantine-color-disabled-color);\n    }\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n}\n\n.radio--outline {\n  & + .icon {\n    --radio-icon-color: var(--radio-color);\n  }\n\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & + .icon {\n      --radio-icon-color: var(--radio-color);\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: none;\n    }\n  }\n}\n"],"mappings":""}