@zohodesk/dot/es/avatar/AvatarUser/AvatarUser.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.container {
  position: relative;
  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
  vertical-align: middle;
}
.paid,
.portal,
.delete {
  font-size: var(--zd_font_size10) ;
}
.paid,
.portal,
.delete,
.lock {
  position: absolute;
  line-height: 0;
}
.paid {
  composes: middle from '~@zohodesk/components/lib/common/common.module.css';
}
[dir=ltr] .paid {
  left: 50% ;
}
[dir=rtl] .paid {
  right: 50% ;
}
.paid {
  top: calc( var(--zd_size2) * -1 ) ;
}
.portal, .lock {
  background-color: var(--zdt_avataruser_default_bg);
  border-radius: 50%;
}
.delete {
  top: 0 ;
  width: 100% ;
  height: 100% ;
  opacity: 0;
  transition: all var(--zd_transition3);
  composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
  color: var(--zdt_avataruser_delete_text);
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--zdt_avataruser_delete_bg);
}
[dir=ltr] .delete {
  left: 0 ;
}
[dir=rtl] .delete {
  right: 0 ;
}
.container:hover .delete {
  opacity: 1;
}
.small .portal {
  top: 0 ;
}
[dir=ltr] .small .portal {
  right: calc( var(--zd_size4) * -1 ) ;
}
[dir=rtl] .small .portal {
  left: calc( var(--zd_size4) * -1 ) ;
}
.xsmall .portal {
  top: var(--zd_size1) ;
}
[dir=ltr] .xsmall .portal {
  right: calc( var(--zd_size2) * -1 ) ;
}
[dir=rtl] .xsmall .portal {
  left: calc( var(--zd_size2) * -1 ) ;
}
.medium .portal {
  top: var(--zd_size1) ;
}
[dir=ltr] .medium .portal {
  right: calc( var(--zd_size1) * -1 ) ;
}
[dir=rtl] .medium .portal {
  left: calc( var(--zd_size1) * -1 ) ;
}
.xmedium .portal {
  top: var(--zd_size3) ;
}
[dir=ltr] .xmedium .portal {
  right: 0 ;
}
[dir=rtl] .xmedium .portal {
  left: 0 ;
}
.large .portal {
  top: var(--zd_size8) ;
}
[dir=ltr] .large .portal {
  right: var(--zd_size1) ;
}
[dir=rtl] .large .portal {
  left: var(--zd_size1) ;
}
.xlarge .portal {
  top: var(--zd_size15) ;
}
[dir=ltr] .xlarge .portal {
  right: var(--zd_size2) ;
}
[dir=rtl] .xlarge .portal {
  left: var(--zd_size2) ;
}

.small .lock {
  top: 0 ;
  font-size: var(--zd_font_size11) ;
}

[dir=ltr] .small .lock {
  right: calc( var(--zd_size5) * -1 ) ;
}

[dir=rtl] .small .lock {
  left: calc( var(--zd_size5) * -1 ) ;
}
.xsmall .lock {
  top: var(--zd_size1) ;
  font-size: var(--zd_font_size12) ;
}
[dir=ltr] .xsmall .lock {
  right: calc( var(--zd_size4) * -1 ) ;
}
[dir=rtl] .xsmall .lock {
  left: calc( var(--zd_size4) * -1 ) ;
}
.medium .lock {
  top: var(--zd_size2) ;
  font-size: var(--zd_font_size13) ;
}
[dir=ltr] .medium .lock {
  right: calc( var(--zd_size5) * -1 ) ;
}
[dir=rtl] .medium .lock {
  left: calc( var(--zd_size5) * -1 ) ;
}
.xmedium .lock {
  top: var(--zd_size4) ;
  font-size: var(--zd_font_size14) ;
}
[dir=ltr] .xmedium .lock {
  right: calc( var(--zd_size6) * -1 ) ;
}
[dir=rtl] .xmedium .lock {
  left: calc( var(--zd_size6) * -1 ) ;
}
.large .lock {
  top: var(--zd_size6) ;
  font-size: var(--zd_font_size18) ;
}
[dir=ltr] .large .lock {
  right: calc( var(--zd_size6) * -1 ) ;
}
[dir=rtl] .large .lock {
  left: calc( var(--zd_size6) * -1 ) ;
}
.xlarge .lock {
  top: var(--zd_size12) ;
  font-size: var(--zd_font_size22) ;
}
[dir=ltr] .xlarge .lock {
  right: calc( var(--zd_size8) * -1 ) ;
}
[dir=rtl] .xlarge .lock {
  left: calc( var(--zd_size8) * -1 ) ;
}