@zohodesk/dot/lib/avatar/AvatarThread/AvatarThread.module.css

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

.container {
  position: relative;
  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
  vertical-align: middle;
  border-radius: 50%;
}

.thread {
  composes: rounded from '~@zohodesk/components/es/common/common.module.css';
  position: absolute;
}
.pointer {
  cursor: pointer;
}
.defaultCursor {
  cursor: default;
}
.threadBg {
  background-color: var(--zdt_avatarthread_bg);
}
.thread_xsmall_pos,
.thread_medium_pos,
.thread_xmedium_pos {
  height: var(--zd_size15) ;
  width: var(--zd_size15) ;
}

.thread_xsmall_pos {
  top: calc( var(--zd_size5) * -1 ) ;
}

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

[dir=rtl] .thread_xsmall_pos {
  left: calc( var(--zd_size5) * -1 ) ;
}
.thread_small_pos {
  top: calc( var(--zd_size3) * -1 ) ;
  height: var(--zd_size12) ;
  width: var(--zd_size12) ;
}
[dir=ltr] .thread_small_pos {
  right: calc( var(--zd_size6) * -1 ) ;
}
[dir=rtl] .thread_small_pos {
  left: calc( var(--zd_size6) * -1 ) ;
}

.thread_small_pos i {
  font-size: var(--zd_font_size8) ;
}

.thread_medium_pos {
  top: calc( var(--zd_size4) * -1 ) ;
}

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

[dir=rtl] .thread_medium_pos {
  left: calc( var(--zd_size5) * -1 ) ;
}

.thread_xmedium_pos {
  top: calc( var(--zd_size4) * -1 ) ;
}

[dir=ltr] .thread_xmedium_pos {
  right: calc( var(--zd_size3) * -1 ) ;
}

[dir=rtl] .thread_xmedium_pos {
  left: calc( var(--zd_size3) * -1 ) ;
}

.thread_large_pos {
  top: 0 ;
  height: var(--zd_size16) ;
  width: var(--zd_size16) ;
}

[dir=ltr] .thread_large_pos {
  right: 0 ;
}

[dir=rtl] .thread_large_pos {
  left: 0 ;
}

.thread_xlarge_pos {
  top: var(--zd_size2) ;
  height: var(--zd_size18) ;
  width: var(--zd_size18) ;
}

[dir=ltr] .thread_xlarge_pos {
  right: var(--zd_size4) ;
}

[dir=rtl] .thread_xlarge_pos {
  left: var(--zd_size4) ;
}

.icon {
  position: absolute;
  line-height: 0;
  top: 50% ;
}

[dir=ltr] .icon {
  left: 50% ;
  transform: translate(-50%, -50%);
}

[dir=rtl] .icon {
  right: 50% ;
  transform: translate(50%, -50%);
}

.border_primary {
  border: 1px solid var(--zdt_avatarthread_primary_border);
}

.border_success {
  border: 1px solid var(--zdt_avatarthread_success_border);
}
.border_danger {
  border: 1px solid var(--zdt_avatarthread_danger_border);
}
.border_default {
  border: 1px solid var(--zdt_avatarthread_default_border);
}
.border_orange {
  border: 1px solid var(--zdt_avatarthread_orange_border);
}

.hover .thread {
  display: none;
}

.hover .thread {
  z-index: 1;
  cursor: pointer;
}

.hover:hover .thread {
  display: block;
}

.text_primary {
  color: var(--zdt_avatarthread_primary_text);
}
.text_success {
  color: var(--zdt_avatarthread_success_text);
}
.text_danger {
  color: var(--zdt_avatarthread_danger_text);
}
.text_default {
  color: var(--zdt_avatarthread_default_text);
}
.text_orange {
  color: var(--zdt_avatarthread_orange_text);
}