@zohodesk/components/es/AvatarTeam/AvatarTeam.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

.varClass {
  /* avatar team default variables */
  --avatarteam_border_width: 1px;
  --avatarteam_border_style: solid;
  --avatarteam_border_color: var(--zdt_avatarteam_default_border);
  --avatarteam_outline_width: 1px;
  --avatarteam_outline_style: solid;
  --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
  --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
  --avatarteam_width: var(--zd_size5);
  --avatarteam_height: var(--zd_size5);
  --avatarteam_border_radius: 50%;
  --avatarteam_bottom_top: initial;
  --avatarteam_bottom_left: initial;
  --avatarteam_bottom_right: initial;
  --avatarteam_top_top: var(--zd_size1);
}
.container {
  position: relative;
  display: inline-block;
  font-size: 0 ;
  vertical-align: middle;
}
.team {
  composes: varClass;
  composes: posab from '../common/common.module.css';
  top: var(--avatarteam_top_top);
  width: var(--avatarteam_width);
  height: var(--avatarteam_height);
  outline-width: var(--avatarteam_outline_width);
  outline-style: var(--avatarteam_outline_style);
  outline-color: var(--avatarteam_outline_color);
  border-width: var(--avatarteam_border_width);
  border-style: var(--avatarteam_border_style);
  border-color: var(--avatarteam_border_color);
  background-color: var(--avatarteam_bg_color);
  border-radius: var(--avatarteam_border_radius);
}
[dir=ltr] .team {
  transform: translate(-50%, -50%);
  left: 50% ;
}
[dir=rtl] .team {
  transform: translate(50%, -50%);
  right: 50% ;
}
.nofill {
  --avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
}
.primaryFilled,
.infoFilled {
  --avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
}
.secondaryFilled {
  --avatarteam_bg_color: var(--zdt_avatarteam_secondary_bg);
}
.borderOnHover:hover .nofill,
.borderOnActive .nofill {
  --avatarteam_border_color : var(--zdt_avatarteam_nofill_hover_border);
}
.borderOnHover:hover .primaryFilled,
.borderOnActive .primaryFilled,
.borderOnHover:hover .infoFilled,
.borderOnActive .infoFilled {
  --avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
}
.team:after,
.team:before {
  position: absolute;
  content: '';
  height: inherit ;
  width: inherit ;
  top: var(--avatarteam_bottom_top);
  outline-width: var(--avatarteam_outline_width);
  outline-style: var(--avatarteam_outline_style);
  outline-color: var( --avatarteam_outline_color);
}
.team:after, .team:before {
  border: inherit;
  background-color: inherit;
  border-radius: inherit;
  box-shadow: inherit;
}
[dir=ltr] .team:after, [dir=ltr] .team:before {
  left: var(--avatarteam_bottom_left);
  right: var(--avatarteam_bottom_right);
}
[dir=rtl] .team:after, [dir=rtl] .team:before {
  right: var(--avatarteam_bottom_left);
  left: var(--avatarteam_bottom_right);
}
.smallteam,
.xsmallteam,
.xxsmallteam {
  --avatarteam_height: var(--zd_size3);
  --avatarteam_width: var(--zd_size3);
}
.mediumteam,
.xmediumteam {
  --avatarteam_height: var(--zd_size5);
  --avatarteam_width: var(--zd_size5);
}
.largeteam,
.xlargeteam {
  --avatarteam_height: var(--zd_size7);
  --avatarteam_width: var(--zd_size7);
}

.xxsmallteam {
  /*  Variable:Ignore  */
  --avatarteam_top_top: 0px;
}
.xxsmallteam::after,
.xxsmallteam:before {
  --avatarteam_bottom_top: var(--zd_size13);
}
.xxsmallteam:after {
  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
}
.xxsmallteam:before {
  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
}


.smallteam::after,
.smallteam:before {
  --avatarteam_bottom_top: var(--zd_size17);
}
.smallteam:after {
  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
}
.smallteam:before {
  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
}

.xsmallteam::after,
.xsmallteam:before {
  --avatarteam_bottom_top: var(--zd_size24);
}
.xsmallteam:after {
  --avatarteam_bottom_left: calc( var(--zd_size10) * -1 );
}
.xsmallteam:before {
  --avatarteam_bottom_right: calc( var(--zd_size10) * -1 );
}

.mediumteam::after,
.mediumteam:before {
  --avatarteam_bottom_top: var(--zd_size26);
}
.mediumteam:after {
  --avatarteam_bottom_left: calc( var(--zd_size13) * -1 );
}
.mediumteam:before {
  --avatarteam_bottom_right: calc( var(--zd_size13) * -1 );
}

.xmediumteam::after,
.xmediumteam:before {
  --avatarteam_bottom_top: var(--zd_size30);
}
.xmediumteam:after {
  --avatarteam_bottom_left: calc( var(--zd_size16) * -1 );
}
.xmediumteam:before {
  --avatarteam_bottom_right: calc( var(--zd_size16) * -1 );
}

.largeteam::after,
.largeteam:before {
  --avatarteam_bottom_top: var(--zd_size46);
}
.largeteam:after {
  --avatarteam_bottom_left: calc( var(--zd_size24) * -1 );
}
.largeteam:before {
  --avatarteam_bottom_right: calc( var(--zd_size24) * -1 );
}

.xlargeteam::after,
.xlargeteam:before {
  --avatarteam_bottom_top: var(--zd_size65);
}
.xlargeteam:after {
  --avatarteam_bottom_left: calc( var(--zd_size29) * -1 );
}
.xlargeteam:before {
  --avatarteam_bottom_right: calc( var(--zd_size29) * -1 );
}