@mantine/core/styles/Avatar.css

React components library focused on usability, accessibility and developer experience

/* Avatar.Group root element */
.m_11def92b {
  --ag-spacing: var(--mantine-spacing-sm);
  --ag-offset: calc(var(--ag-spacing) * -1);

  display: flex;
  padding-inline-start: var(--ag-spacing);
}

/* Avatar root element */
.m_f85678b6 {
  --avatar-size-xs: 16px;
  --avatar-size-sm: 26px;
  --avatar-size-md: 38px;
  --avatar-size-lg: 56px;
  --avatar-size-xl: 84px;

  --avatar-size: var(--avatar-size-md);
  --avatar-radius: 1000px;
  --avatar-bg: var(--mantine-color-gray-light);
  --avatar-bd: 1px solid transparent;
  --avatar-color: var(--mantine-color-gray-light-color);
  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);

  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: block;
  user-select: none;
  overflow: hidden;
  border-radius: var(--avatar-radius);
  text-decoration: none;
  padding: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);
  min-width: var(--avatar-size);
}
.m_f85678b6:where([data-within-group]) {
    margin-inline-start: var(--ag-offset);
    border: 2px solid var(--mantine-color-body);
    background: var(--mantine-color-body);
  }

.m_11f8ac07 {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.m_104cd71f {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  user-select: none;
  border-radius: var(--avatar-radius);
  font-size: var(--avatar-placeholder-fz);
  background: var(--avatar-bg);
  border: var(--avatar-bd);
  color: var(--avatar-color);
}

.m_104cd71f > [data-avatar-placeholder-icon] {
    width: 70%;
    height: 70%;
  }