.container {
  position: relative;
  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
  vertical-align: middle;
}
.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_avatarclose_pop_text);
  cursor: pointer;
  transform: translateZ(0);
  background-color: var(--zdt_avatarclose_pop_bg);
}
[dir=ltr] .pop {
  left: 0 ;
  transform: rotate(45deg);
}
[dir=rtl] .pop {
  right: 0 ;
  transform: rotate(-45deg);
}
.icon {
  position: absolute;
  line-height: 0;
  font-size: var(--zd_font_size16) ;
  composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
}
.container:hover .pop {
  opacity: 1;
  visibility: visible;
}