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

React components library focused on usability, accessibility and developer experience

@layer mantine {.m_f84d0407 {
  --data-list-fz: var(--mantine-font-size-sm);
  --data-list-lh: var(--mantine-line-height-sm);
  --data-list-gap: var(--mantine-spacing-sm);
  --data-list-label-width: calc(7.5rem * var(--mantine-scale));

  display: flex;
  flex-direction: column;
  gap: var(--data-list-gap);
  font-size: var(--data-list-fz);
  line-height: var(--data-list-lh);
  margin: 0;
  padding: 0;
}

  .m_f84d0407:where([data-with-divider]) {
    gap: 0;
  }

.m_f848fe38 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--mantine-spacing-xs);
}

.m_f84d0407:where([data-orientation='vertical']) > .m_f848fe38 {
  flex-direction: column;
  gap: 0;
}

.m_c791b39c {
  color: var(--mantine-color-dimmed);
  font-size: var(--data-list-fz);
  line-height: var(--data-list-lh);
  min-width: var(--data-list-label-width);
  margin: 0;
}

.m_f84d0407:where([data-orientation='vertical']) .m_c791b39c {
  min-width: 100%;
}

.m_c81ec619 {
  font-size: var(--data-list-fz);
  line-height: var(--data-list-lh);
  margin: 0;
}

.m_f84d0407:where([data-with-divider]) > .m_f848fe38:where(:not(:first-of-type)) {
  border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);
  padding-top: var(--data-list-gap);
  margin-top: var(--data-list-gap);
}
}