@zohodesk/components/lib/common/avatarsizes.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

/*Avatar common Sizes*/
.varClass {
  /* avatar size default variables */
  --avatar_width: var(--zd_size34);
  --avatar_height: var(--zd_size34);
}
.small,
.xsmall,
.medium,
.xmedium,
.large,
.xlarge,
.xxsmall {
  composes: varClass;
  width: var(--avatar_width);
  height: var(--avatar_height);
}
.small {
  --avatar_height: var(--zd_size22);
  --avatar_width: var(--zd_size22);
}
.xxsmall {
  --avatar_height: var(--zd_size18);
  --avatar_width: var(--zd_size18);
}
.xsmall {
  --avatar_height: var(--zd_size30);
  --avatar_width: var(--zd_size30);
}

.medium {
  --avatar_height: var(--zd_size34);
  --avatar_width: var(--zd_size34);
}

.xmedium {
  --avatar_height: var(--zd_size40);
  --avatar_width: var(--zd_size40);
}

.large {
  --avatar_height: var(--zd_size60);
  --avatar_width: var(--zd_size60);
}

.xlarge {
  --avatar_height: var(--zd_size80);
  --avatar_width: var(--zd_size80);
}