@mantine/core/styles/Alert.layer.css

React components library focused on usability, accessibility and developer experience

@layer mantine {.m_66836ed3 {
  --alert-radius: var(--mantine-radius-default);
  --alert-bg: var(--mantine-primary-color-light);
  --alert-bd: 1px solid transparent;
  --alert-color: var(--mantine-primary-color-light-color);

  padding: var(--mantine-spacing-md) var(--mantine-spacing-md);
  border-radius: var(--alert-radius);
  position: relative;
  overflow: hidden;
  background-color: var(--alert-bg);
  border: var(--alert-bd);
  color: var(--alert-color);
}

.m_a5d60502 {
  display: flex;
}

.m_667c2793 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mantine-spacing-xs);
}

.m_6a03f287 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mantine-font-size-sm);
  font-weight: 700;
}

.m_6a03f287:where([data-with-close-button]) {
    padding-inline-end: var(--mantine-spacing-md);
  }

.m_698f4f23 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m_667f2a6a {
  line-height: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-inline-end: var(--mantine-spacing-md);
  margin-top: 1px;
}

.m_7fa78076 {
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: var(--mantine-font-size-sm);
}

:where([data-mantine-color-scheme='light']) .m_7fa78076 {
    color: var(--mantine-color-black);
}

:where([data-mantine-color-scheme='dark']) .m_7fa78076 {
    color: var(--mantine-color-white);
}

.m_7fa78076:where([data-variant='filled']) {
    color: var(--alert-color);
  }

.m_7fa78076:where([data-variant='white']) {
    color: var(--mantine-color-black);
  }

.m_87f54839 {
  width: 20px;
  height: 20px;
  color: var(--alert-color);
}
}