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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Alert.module.cjs","names":[],"sources":["../../../src/components/Alert/Alert.module.css"],"sourcesContent":[".root {\n  --alert-radius: var(--mantine-radius-default);\n  --alert-bg: var(--mantine-primary-color-light);\n  --alert-bd: 1px solid transparent;\n  --alert-color: var(--mantine-primary-color-light-color);\n\n  padding: var(--mantine-spacing-md) var(--mantine-spacing-md);\n  border-radius: var(--alert-radius);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--alert-bg);\n  border: var(--alert-bd);\n  color: var(--alert-color);\n}\n\n.wrapper {\n  display: flex;\n}\n\n.body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mantine-spacing-xs);\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: var(--mantine-font-size-sm);\n  font-weight: var(--mantine-font-weight-bold);\n\n  &:where([data-with-close-button]) {\n    padding-inline-end: var(--mantine-spacing-md);\n  }\n}\n\n.label {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.icon {\n  line-height: 1;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin-inline-end: var(--mantine-spacing-md);\n  margin-top: 1px;\n}\n\n.message {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: var(--mantine-font-size-sm);\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-white);\n  }\n\n  &:where([data-variant='filled']) {\n    color: var(--alert-color);\n  }\n\n  &:where([data-variant='white']) {\n    color: var(--mantine-color-black);\n  }\n}\n\n.closeButton {\n  width: 20px;\n  height: 20px;\n  color: var(--alert-color);\n}\n"],"mappings":""}