.container {
  position: relative;
  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
  vertical-align: middle;
  border-radius: 50%;
  padding: var(--zd_size2) ;
}
.on {
  border: 1px solid var(--zdt_avatarcollision_on_border);
}
.off {
  border: 1px solid var(--zdt_avatarcollision_off_border);
}
.idle {
  composes: on;
  opacity: 0.4;
}
.pop {
  position: absolute;
  composes: rounded from '~@zohodesk/components/es/common/common.module.css';
  opacity: 0;
  visibility: hidden;
  top: 0 ;
  height: 100% ;
  width: 100% ;
  transition: opacity var(--zd_transition2);
  color: var(--zdt_avatarcollision_pop_text);
  cursor: pointer;
  transform: translateZ(0);
  background-color: var(--zdt_avatarcollision_pop_bg);
}
[dir=ltr] .pop {
  left: 0 ;
}
[dir=rtl] .pop {
  right: 0 ;
}
.icon {
  position: absolute;
  line-height: 0;
  composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
  color: var(--zdt_avatarcollision_icon_text);
  font-size: var(--zd_font_size13) ;
}
.container:hover .pop {
  opacity: 1;
  visibility: visible;
}

.off::after {
  content: '';
  position: absolute;
  top: 50% ;
  height: var(--zd_size4) ;
  border: 1px solid var(--zdt_avatarcollision_off_after_border);
  background-color: var(--zdt_avatarcollision_off_after_bg);
}

[dir=ltr] .off::after {
  left: calc( var(--zd_size5) * -1 ) ;
  right: calc( var(--zd_size5) * -1 ) ;
  transform: translateY(-50%) rotate(130deg);
}

[dir=rtl] .off::after {
  right: calc( var(--zd_size5) * -1 ) ;
  left: calc( var(--zd_size5) * -1 ) ;
  transform: translateY(-50%) rotate(-130deg);
}